teleren/devto huggingface dataset:
JavaScript arrow function
Tags: javascript, webdev, programming, tutorial
Published: 2023-05-10 13:37:36

### JavaScript Function:

```js
function greet(){
    console.log("Hello world");
}
```

### JavaScript regular function expression:
A regular function expression is like storing something into a variable. Following example might help you understand it better. We declare a variable,and then we write down the function.

```js
const greet =  function(){
    console.log("Hello world");
}
```

### Arrow function
Now, here comes the arrow function. Arrow function is nothing but syntactically a compact alternative to a regular function expression. 

```js
const greet = () => {
    console.log("Hello world");
}
```
Notice there is no `function` keyword in the above function expression. instead we just use an arrow and the curly braces. Also, we use parentheses before the => sign, where we can pass any arguments/parameters if needed. 
 
```js
const greet = (name) => {
    console.log(`Hey ${name}!`);
}
```
We can do a lot more using arrow function. Here is a short trick if we want to return something. 

```js
const add = (x,y) => {
    return x+y;
}
```
Instead of writing the `return` keyword and using curly braces, we put the statement or expression which need to be returned inside a parentheses and that's it.

```js
const add = (x,y) => (
    x+y;
)
```
We can write even more shorter if we use single line statement.

```js
const add = (x, y) => x + y;
```
In that case we don't even need to use any parentheses or curly braces.

### Summary

```js
const greet =  function(){ //regular function expression
    console.log("Hello world");
}

const greet = (name) => { //arrow function with parens around param
    console.log(`Hey ${name}!`);
}

const greet = name => { //no parens around param
    return (`Hey ${name}!`);
}
const greet = name => ( //implicit return
    `Hey ${name}!`;
)

const isEven = num => num % 2 === 0 //one liner implicit return

```
Thanks for reading.
Read my other articles : [Dev blogs](https://dev.to/syedfaysel)
Mutable and immutable with Python3
Published: 2023-05-10 13:35:41

In this article I will be talking about what the id and type functions are and how to use them. Also I will be talking about mutable and immutable objects.
Python offers some tools to find out whether an object is mutable or immutable through, the functions id( ) and type( ).

## id and type functions

id function: Type( ) it’s the function we use to print the type of an object.

```
>>> a = 47
>>> b = a
>>> id(a)
7904
>>> id(b)
7904
>>> a is b
True
```

Type function: with id( ) fucntion we can get the variable identifier (which is the memory address in the CPython implementation).

```
>>> a = 47
>>> b = a
>>> type(a)
<class 'int'>
>>> type(b)
<class 'int'>
```
## Mutable objects

In Python, some common mutable objects include lists, dicts, and sets. In simple terms, when an object is referred to as being mutable, it means that the object, or the contents of that object can be altered.
Immutable objects
Common immutable objects in Python include ints, floats, tuples, and strings. Unlike mutable objects, the immutable objects can’t be changed.

## How NSMALLPOSINTS and NSMALLNEGINTS work?

It is actually an array of 262 integers . And this structure is basically used to access these integers fast. They get allocated right when you initialize your NSMALLPOSINTS and NSMALLNEGINTS.

In Cpython the intigers in the range (-5 to 256) those values are used, because they are most used integers. This is a structure to access faster to those numbers, so there is no need to create them.
What is software development? (It’s management)
Tags: webdev, programming, discuss
Published: 2023-05-10 13:28:43

A lot of people have expended a lot of words asking what software development is metaphorically. Are we construction workers? Are we factory workers? Are we gardeners? Are we architects? Lets look at what we know.

- Where is the value in software? The value that is produced is in the data that our users want to see on their machines. So, value == data + presentation.

- What makes the value? The application provides data generation and presentation, so the application is ultimately the value generator.

- What is the relationship between the software developer and the application? The software developer creates detailed instructions for the application on how to generate value, determines and monitors metrics to see how well the application is generating value, and makes decisions based on those things.

What does this mean? What other occupation does things like making metrics, monitoring them, and using them improving value production through things like documentation and instruction? There is an answer to this that should be immediately understandable to non-technical people. Software development is a type of management. The “workers” are the processes running on computers.

Imagine a factory that has all the management go on a retreat. The workers will continue to make product for some amount of time until a failure happens that is not accounted for previously. Perhaps no workers were informed of how to hire a technician to fix a critical machine.

The same is true in software. If a development team leaves one day, the application will continue to provide value until it fails in a way that was unaccounted for.

Why does this matter? For one thing, I think this has implications on how a business needs to grade software developers.

What would you grade a manager on and how would that map to software? I think the most obvious thing would be the application metrics. How many requests are getting served? How long does it take a user to get what they want?

What are we grading developers on now that do not make sense to grade managers on? Do we grade managers on how many instructions they give to workers? Is it a good idea to grade them on lines added to the employee handbook?

What else does this metaphor help with? Are there types of software development that don't fit into this metaphor?
Analyzing and interpreting the BSONTypeError
Tags: mongodb, errors
Published: 2023-05-10 13:11:15


**What does this error mean?**

> “BSONTypeError:Argument Passed In Must Be a String of 12 Bytes or a String of 24 Hex Characters or an Integer"

Before we dive into knowing what this error means and when it occurs let’s understand what BSON means.


**BSON** is like a binary version of JSON, a way to represent data. It is similar to JSON because it supports different data types like strings, numbers, Booleans, arrays, and objects. But BSON goes further by adding more types such as dates, binary data, and special types like **ObjectID** and Decimal128. This allows MongoDB to handle a wider range of data in a more efficient way.

Therefore, when we see the error “BSONTypeError” it means the data provided **does not match the expected BSON (Binary JSON) type.**

**Now let us understand this error**


> “BSONTypeError: Argument Passed In Must Be a String of 12 Bytes or a String of 24 Hex Characters or an Integer”

You see this error message when the **ID** you provided is not 12 Bytes String, 24 Hex characters String or a number. 

MongoDB uses something called an ObjectID to identify each document in a collection. An ObjectID is a special code made up of **12 bytes, usually shown as a string of 24 letters and numbers.** So, when you work with ObjectIDs or perform queries that involve them, it's important to make sure that the **ID** you provide **follows this specific format of 12 bytes or 24 characters in hexadecimal (letters and numbers).**

If you try to save or use a value in MongoDB that is not supported or doesn't match what MongoDB expects, you may see a "BSONTypeError" error. 

**Here are some common situations that can cause this error:**

1) **Invalid Format:** If the ID you provided has a string with **fewer or more than 24 characters**, or contains **non-hexadecimal characters**, MongoDB will raise this error.

<u>Wrong</u>:


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

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


2.**Wrong Data Type:** If the ID you provided is not one of three specific data types: **24 byte hex string, 12 byte binary string or a Number.**

<u>Wrong</u>:


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

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


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

**Correct Format:**


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

In this example, validId represents a valid **ID** as it follows the following format: 

1) It consists of 24 characters, which are **all hexadecimal (0-9, A-F).**

2) The ID is provided as a **string**

If you get this error, always check if the ID you have sent from the client-side follows the format discussed in the **Correct format**.
Introducing the React Audio Wizard: A Headless Audio Player for Your React Applications
Tags: react, audio, opensource, library
Published: 2023-05-10 12:55:47

Managing audio playback in your React applications just got a whole lot easier! We're thrilled to introduce react-audio-wizard, a headless audio player custom-built for React.

This unique library is designed as a hook, providing you the flexibility to play audio files, pause, seek, and track both the current time and duration of the audio. The best part? It's incredibly simple to implement.

## Getting Started with React Audio Wizard

To start using `react-audio-wizard`, install it via npm or yarn:

```bash
npm install react-audio-wizard // or yarn
```

You can check out a live demo of the hook in action over at [CodeSandbox](https://codesandbox.io/s/react-audio-wizard-3lqbe7?file=/tsconfig.json).

## Integrating React Audio Wizard Into Your Application

The real magic of react-audio-wizard lies in its simplicity. Here's a quick look at how you can leverage it in your application:

```tsx
import { useAudioWizard } from 'react-audio-wizard'

function MyComponent() {
  const { status, play, pause, handleSeek, duration, currentTime } = useAudioWizard({ url: 'audiofile.mp3' })

  return (
    <div>
      <button onClick={play} disabled={status !== 'loaded' && status !== 'paused'}>
        Play
      </button>
      <button onClick={pause} disabled={status !== 'playing'}>
        Pause
      </button>
      <button onClick={() => handleSeek({ seekTime: 1 })}>+1</button>
      <p>Status: {status}</p>
      <p>Duration: {duration}</p>
      <p>Current Time: {currentTime}</p>
    </div>
  )
}
```

## Understanding the API

The useAudioWizard function accepts a single argument: an object containing the URL of the audio file you'd like to play.

This function returns an object packed with useful properties:

status: Provides the current status of the audio. It can return 'idle', 'loaded', 'playing', or 'paused'.
play: A function that starts the audio playback.
pause: A function that pauses the audio.
handleSeek: A function that seeks the audio to a specific time. This function accepts an object with a seekTime property.
duration: Returns the total duration of the audio in seconds.
currentTime: Returns the current playback position in seconds.
The status property is particularly interesting as it provides real-time updates on the state of the audio player. The possible values are:

'idle': The player is initialized but has not started loading any audio data yet.
'loaded': The audio data is fully loaded and ready for playback.
'playing': The audio is currently playing.
'paused': The audio is paused.
With the MIT License, react-audio-wizard is ready for your next project. Whether you're looking to add a unique soundscape to your website or build an immersive audio experience for your users, react-audio-wizard is up to the task! So why wait? Start experimenting with audio in your React apps today!
Getting Started with Apache AGE: A Comprehensive Guide (Part 3)
Tags: apacheage, postgres, database, graphdatabase
Published: 2023-05-10 12:35:01

In this article, we would be looking at **AGE Viewer**. AGE Viewer is a web-based tool that is used to visualize the relationships between nodes, edges and the output of cypher queries in AGE. It can handle large and complex graph data.

**Installing AGE Viewer**
`npm` is required to install AGE Viewer. You can install through the terminal with:
```
nvm install 14.16.0
```
Next, go into the directory where you downloaded AGE and download AGE Viewer there:
```
git clone https://github.com/apache/age-viewer.git
```
**Launching AGE Viewer**
```
cd age-viewer
npm run setup
npm run start 
```
This should open `AGE Viewer` in a browser on your PC and you should see some empty boxes requiring details to connect to a database. Ensure you type in the right details. In my case, it will be:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0ud2em5ed3wfq3j2auj.png)
If connected successfully, you should see something similar to the image below with your details, the nodes and edges.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpsufsv63ol93y02r18d.png)

**Visualizing Queries**
We can visualize queries now that we have AGE Viewer set up. Let’s see all the nodes present in this graph.
```
SELECT * FROM cypher('test', $$ MATCH (v) RETURN v $$) as (v agtype);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31crknbdsvp9q5dbpura.png)

We can also visualize the relationship between nodes that have similar tribes:
```
SELECT * FROM cypher('test', $$ MATCH (v)-[r:IS]-(v2) RETURN v, r, v2 $$) AS (v agtype, r agtype, v2 agtype);
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t68h39bjhlhojvope1e.png)

**Conclusion**
Visualizing data is very important for efficient data extraction, analysis and event prediction. AGE Viewer helps ease this process with its awesome functionalities. In this post, we just scratched the surface on what is an ideal tool for data visualization in graph database systems which would be a great asset for data scientists, analysts and everyone working with data.

**References**
For more information on Apache AGE, visit:
[AGE website](https://age.apache.org)
[AGE GitHub](https://github.com/apache/age)
[AGE Viewer](https://github.com/apache/age-viewer)
Install Rancher Desktop on Arch Linux
Tags: kubernetes, docker, linux, archlinux
Published: 2023-05-10 12:09:18

I like to hack on Linux and recently I have been messing around with an Arch Linux distro called [Manjaro](https://docs.manjaro.org/). For some of my side projects I want to run I need a Kubernetes cluster running locally. I didn't really want to deal with setting up [Minikube](https://minikube.sigs.k8s.io/docs/start/) so I started looking for an alternative.
I use Rancher Desktop at my day job on a Macbook Pro and have been impressed with how easy it makes working with Kubernetes locally. So, I thought I'd try it on my Linux box as well. To my surprise, it was easy to set up on Arch, and it was just as easy to work with Kubernetes.

#But what is Rancher Desktop?
[Rancher Desktop](https://rancherdesktop.io/) can be thought of as a replacement for Docker Desktop. It runs Kubernetes (using the lightweight [k3s](https://k3s.io/)) and container management on your desktop and you can build, push, pull, and run container images locally. Additionally, Rancher Desktop allows Kubernetes containers to be run without being pushed to a registry. It provides common tools used in container management such as `kubectl`, `helm`, and the `Docker CLI`. To get all this container goodness, download and run the application.

#Install steps
##pass setup
Rancher Desktop uses `pass` to secure credentials to `Docker login` and `nerdctl login`. `pass` is known as the standard unix password manager and provides tooling around adding, editing, generating and retrieving passwords. For more information on `pass` see [here](https://www.passwordstore.org/).
```bash
sudo pacman -S pass
```
Next, generate a gpg key
```bash
gpg --generate-key
```
The output will be something like this: `8CBBDE9E1344436CD920569B39D966B655EB2207`
Now initialize `pass` by passing this key ID to it:
```bash
pass init 8CBBDE9E1344436CD920569B39D966B655EB2207
```

##Install via AppImage
Download the AppImage [here](https://download.opensuse.org/repositories/isv:/Rancher:/stable/AppImage/rancher-desktop-latest-x86_64.AppImage). To run the AppImage you will need to make it executable. In a terminal, change directory to wherever you downloaded the AppImage and run this command: 
```bash
chmod +x rancher-desktop-latest-x86_64.AppImage
```
Now you can run the AppImage:
```bash
./rancher-desktop-latest-x86_64.AppImage
```
And there you have it, you should see Rancher Desktop starting up. The start up will include a couple of pop ups asking for access to your PATH and it may take a couple of minutes for kubernetes to start. Once started, you can run `docker` or `kubectl` commands to start building and deploying containers! 

I'm a big fan of Rancher desktop since its allowed me to easily build and deploy Kubernetes apps locally. If you haven't tried it out and don't want to deal with the complexity of minikube, give Rancher Desktop a shot. Leave a comment if you enjoy Rancher Desktop as well! 

_Photo by Kerry: https://www.pexels.com/photo/mountain-near-house-534415/_
Laravel .htaccess
Tags: laravel, apache2, ssl
Published: 2023-05-10 12:04:42

```
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

RewriteCond %{REQUEST_URI} !/public
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
```
.NET 8 + Docker
Tags: beginners, docker, dotnet
Published: 2023-05-10 11:54:01

Have you read my previous post about .NET 7 and the new feature of dotnet publish? I recommend reading that post because I won't cover some steps.

## Preparation

1. [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) - When posting this, the version is a preview version.
2. [Docker](https://docs.docker.com/get-docker/)

## Starter Project

You can try cloning from the `net7.0` branch from [this repository](https://github.com/bervProject/docker-net-example/tree/net7.0).

## The changes

1. Update `DockerNetExample/DockerNetExample.csproj`. We update the TargetFramework to `net7.0` and add `ContainerBaseImage`. Normally, we don't add `ContainerBaseImage`, but because currently still a preview version, I recommend adding it. We also can add `ContainerImageTags` to distinguish from the previous version.

    ```xml
    <Project Sdk="Microsoft.NET.Sdk.Web">
    
      <PropertyGroup>
        <TargetFramework>net8.0</TargetFramework>
        <Nullable>enable</Nullable>
        <ImplicitUsings>enable</ImplicitUsings>
        <ContainerImageName>docker-net-example</ContainerImageName>
        <ContainerBaseImage>mcr.microsoft.com/dotnet/aspnet:8.0-preview</ContainerBaseImage>
        <ContainerImageTags>2.0.0;latest</ContainerImageTags>
      </PropertyGroup>
    
    </Project>
    ```

2. Now, let's run the dotnet publish command. Command: `dotnet publish --os linux --arch x64 /t:PublishContainer -c Release`.

3. Checking the docker image. `docker image ls`

    ![docker image ls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz047d4x50w01m6jq7en.png)

4. I will introduce you to a Docker Compose. If you are using Docker Desktop, you already have Docker Compose bundled. [More information about Docker Compose](https://docs.docker.com/compose/). You can create a file `docker-compose.yml`.

    ```yml
    version: "3.9"
    services:
      dotnet:
        image: "docker-net-example:2.0.0"
        ports:
          - 8000:80
        environment:
          - ASPNETCORE_URLS=http://+
    ```

5. You can check the detailed PR [here](https://github.com/bervProject/docker-net-example/pull/10).

6. You can test using `curl` or other tools.

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

## Thanks

If you have any feedback, feel free to share it with me in this post or raise an issue in the repository.

![GIF YES](https://media.giphy.com/media/UlDGFvhezbb2rjs62c/giphy-downsized-large.gif)

## Repository

{% embed https://github.com/bervProject/docker-net-example %}
Become the NextJS 13 Ninja with these resources
Published: 2023-05-10 11:51:59

NextJS has gradually become the default choice of frontend developers be it side projects or production-grade applications. Recently I was trying to learn NextJS 13, yeah couldn’t beat the FOMO, and lazy me didn’t want to learn through docs. And the law of attraction did work in my favor this time, came across these resources, thanks to Twitter and Youtube. If you’re the one trying to find some great resources other than docs here you go.


![NexJS 13 app router stable now](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xra0ffa53m2tkt5fbuf2.png)


## [Dave Grays NextJS 13 playlist](https://youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj)

I found Dave Gray's YouTube channel when I was trying to understand TypeScript, and I was having a hard time finding any helpful stuff.  But what an amazing teacher he is, you would love his way of teaching too. So, if you're someone who likes learning from videos more than reading, you should really check his NextJS playlist.

{% youtube 6h649f2fB9Q %}


## [Taxonomy](https://github.com/shadcn/taxonomy)

This is the last thing you need to become a NextJS 13 ninja and built your next production-grade app. I myself have learned a lot from it be it regarding the best practices, the file structure and so much more. Based on the new app directory, it's an open-source project built by [shadcn](https://twitter.com/shadcn?s=20) with all the features you need to get started like authentication,  payment integration using stripe, docs, and blog using mdx and [Contentlayer](https://www.contentlayer.dev/), ORM, and database. You say it, you have it. Yeah, it's written in typescript too.


![Taxonomy project features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrg11g3729edufu8e2o3.png)


## [Official Docs](https://nextjs.org/docs)

How can we forget that? The NextJS docs are top-notch, super beginner friendly, and will be your go-to resource always. 

{% embed https://nextjs.org/docs %}

So, were you also planning to learn NextJS 13, now you don’t have any reason to procrastinate. Let’s gooo! 🫡