teleren/devto huggingface dataset:
How to Create Nested TabViews in .NET MAUI
Tags: dotnet, dotnetmaui, csharp
Published: 2023-06-09 06:06:51

Learn how to create nested tab views in .NET MAUI. This video shows how to create nested TabViews by adding multiple levels of tabs by setting up a top-level TabView with categories such as "Charts," "Sliders," and "Calendars." Each tab will have its own set of tabs with specific controls. The advanced .NET MAUI Tab View is a simple and intuitive interface for tab navigation in mobile and desktop applications, where users can explore and switch between different tabs. 

_Product overview_: https://www.syncfusion.com/maui-controls/maui-tab-view

_Tutorial video_: https://www.syncfusion.com/tutorial-videos

_Download the example from GitHub_: https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/CreateNestedTabViews_MAUI

{% youtube batfDt1S8Mc %}
State management in its own module in vanilla JavaScript
Tags: javascript, html, webdev, programming
Published: 2023-06-09 06:00:22

You can organize your code better by separating the state management into its own module. Here's how you might do it:

In store.js:

```javascript
// Define the initial state
let state = {
  count: 0
};

// Define a list of subscribers
let subscribers = [];

// Define a function to update the state and notify subscribers
function setState(newState) {
  state = newState;

  // Notify subscribers
  for (let i = 0; i < subscribers.length; i++) {
    subscribers[i](newState);
  }
}

// Define a function to subscribe to state changes
function subscribe(callback) {
  subscribers.push(callback);
}

// Export the state, setState, and subscribe functions
export { state, setState, subscribe };
```

In main.js (or wherever you want to use the state):

```javascript
import { state, setState, subscribe } from './store.js';

// Subscribe a function that updates the DOM to state changes
subscribe(function(newState) {
  document.getElementById('count').textContent = "Count: " + newState.count;
});

// Define a function to increment the count
function incrementCount() {
  setState({
    count: state.count + 1
  });
}

// Call the function to increment the count
incrementCount();
```

In this example, `store.js` exports the current state, a setState function to update the state, and a subscribe function to subscribe to state changes. Then, in main.js, you import these exports and use them to manage the state of your application.

Please note that this example uses ES6 modules, which may not be supported in all environments without a build step (like Babel or webpack). You might also need to run this code on a server (like using the `http-server` package in Node.js), as some browsers don't support ES6 modules with the `file://` protocol, which is typically used when you open an HTML file directly in your browser.

If you're looking for a remote job working with javascript, signup for [Grazily.com](https://grazily.com) (it's free)
Data Structure used behind Dictionary apps & Search Engines Auto-Complete Feature
Tags: datastructures, dsa, programming, learning
Published: 2023-06-09 05:46:00

Ever wondered how search engines and dictionary apps suggest the right words as you type? It's all thanks to Trie Data Structure! 😃

The data structure behind the auto-complete feature is also Trie.

Trie is also called “Prefix Tree”. Trie is best suitable when you want to search Strings based on the prefix string (like we do in the dictionary app, where if we enter “app” it shows us suggestions like “apple”, “application” etc.)

Using Trie we can insert and search for the strings in O(k) time where k is the length of the string we want to insert or search. 🚀

and yes, Trie has been derived from reTRIEval word.
Use Next.js <Link> component in posts with Markdown
Tags: nextjs, react, markdown
Published: 2023-06-09 05:28:16

For [stakingcrypto.io](https://stakingcrypto.io) I'm trying to store all content that is meant for blog, coin and exchange details in markdown components because I find it really easier to add and update data quickly.

A pain has always been to be able to insert `<Image>` and `<Link>` nextjs components as I always ending up with markdown files like this


![Bad MDX formatting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mh0vhf8hexnkdm8eg1bz.png)

As you can see, it does not look like markdown anymore and thus I can't ask not technical people to fill them up for me ☹️.

That's when I stumbled on [this excellent post of Sebastien Castiel](https://scastiel.dev/nextjs-image-in-markdown) which fixed the `<Image>` problem in a very neat way. And I ended up with this:

![Better MDX formatting with images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmcm5r26e73822im95q6.png)


A lot better 😀, and I thus realized it would be very easy to replace those ugly links (`<Link>`) in the same way with one easy trick!

```jsx
         <article className="prose lg:prose-xl">
            {mdxContent && (
              <MDXRemote
                components={{
                  ...components,
                  a: ({ href, children }: any) => {
                    if (href.startsWith('/')) {
                      return (
                        <Link href={href}>
                          <a>{children}</a>
                        </Link>
                      );
                    }
                    return (
                      <a href={href} target="_blank" rel="noreferrer">
                        {children}
                      </a>
                    );
                  },
                }}
                {...mdxContent}
              />
            )}
          </article>
```

With this
- for an internal link, `[Stake Ethereum](/stake/ETH/ethereum)` 
- for a _blank page, `[Stake Ethereum](https://stakingcrypto.io/stake/ETH/ethereum)`

So easy to write and a lot neater



![Better MDX formatting with images and links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw35rpdhz42hjmjnb47l.png)

I now can also then add some nice CSS tweaks to add a small icon next to those external links.

Splendid! 🤩


Thanks for reading and [follow me on Twitter](https://twitter.com/martinratinaud) for more
AI Content Detectors and Plagiarism Checkers for 2k23
Tags: webdev, beginners, programming
Published: 2023-06-09 05:19:00

As the world of digital content continues to grow, so too does the need for tools to analyze its quality. In 2k23 and beyond, plagiarism checkers and AI content detectors will become increasingly important for ensuring that content on our websites and social media posts is original and of the highest quality.

Plagiarism checkers are a tool which users can use to detect if any of the content they have created is copied from another source. This is a valuable tool for any type of writer, from students to content creators, and can help them to ensure that their work is original. AI content detectors, on the other hand, are used to detect the quality of a piece of content. By analyzing the text for things like grammar and readability, AI content detectors can help to ensure that the content is written to a certain standard.

Both of these tools are extremely useful for any digital creator in 2k23 and beyond. With plagiarism becoming an increasingly common problem, it is important to ensure that the content we produce is original and of the highest quality. Plagiarism checkers and AI content detectors can help us to do this, making sure that our digital content is of the highest possible quality.

At Readmorr, we understand the importance of these tools for digital content creators. That’s why we have created a comprehensive guide to plagiarism checkers and AI content detectors. This guide will help users to understand the different types of tools available and how they can be used to ensure that the content they create is original and of a high quality. You can read our guide here: https://readmorr.com/plagiarism-checker-and-ai-content-detector-tools/.

It is clear that plagiarism checkers and AI content detectors are invaluable tools for digital content creators in 2k23 and beyond. They can help to ensure that content is original and of the highest quality, making them essential tools for anyone creating digital content. To find out more about these tools and how to use them, check out our comprehensive guide at https://readmorr.com/plagiarism-checker-and-ai-content-detector-tools/.
The catch in the RxJS catchError
Tags: angular, rxjs
Published: 2023-06-09 05:01:04

Hi friends, George here.

Catching errors in rxjs streams can be troublesome.

Let's explain 3 different options and outcomes for our demo use case:
Let's imagine we have a component that fetch data for different entities from the database. Fetch requests come in time in a form of rxjs stream - for our case let us mock it with rxjs interval

```
const interval$ = interval(1000).pipe(skip(1));
```

Also, we have an API service which is responsible for getting a data. However, our API is not reliable and from time to time throws an error
```
@Injectable(
  providedIn: 'root',
})
export class DemoService {
  /**
   * mock of an api endpoint which throws an error on each even call
   */
  getData(counter: number): Observable<any> {
    if (counter % 2 === 0) {
      return throwError(() => new Error());
    }


    return of(`some demo data ${counter}`);
  }
}
```

Let's get the data from the API service in ngOnInit
```
  ngOnInit() {
    const interval$ = interval(1000).pipe(skip(1));


    this.data$ = interval$.pipe(
      tap((i) => console.log(i)),
      switchMap((i) => this.demoService.getData(i)),
    );
```

Now, how do we handle these errors incoming from the API?

## 1. catchError and returning new observable
In my team this is what we have done many time without thinking it through
```
this.data$ = interval$.pipe(
      switchMap((i) => this.demoService.getData(i)),
      catchError(() => of('error is cought from api'))
    );
```

What we did not realize is that we are re-emitting new observable - the one created by of() function and the data$ will subscribe to it. Hence returning the caught value and completing the stream.
This is what happens
```
> 1
> 2 //cought

streamed was unsubscribed
```

## 2. catchError while returning the cought observable
If you look at the [catchError](https://rxjs.dev/api/operators/catchError) documentation you can see the callback actually takes two parameters: error itself and the cought observable
```
catchError<T, O extends ObservableInput<any>>(selector: (err: any, caught: Observable<T>) => O): OperatorFunction<T, T | ObservedValueOf<O>>
```

we can use this to re-emit the original observable
```
this.data$ = interval$.pipe(
      switchMap((i) => this.demoService.getData(i)),
      catchError((err, cought$) => cought$)
    );
```

this way the stream will start emitting values again
```
> 1
> 2//cought
> 1
> 2//cought
> 1
> ...
```

## 3. catchError inside service stream
In order to continue the original stream with new incoming values we have to move the catch to the inner observable
```
    this.data$ = interval$.pipe (
      switchMap((i) =>
        this.demoService.getData(i).pipe(catchError(() => of('cought')))
      )
    );
```

this way we get a stream with cought values
```
> 1
> 2 //cought
> 3
> 4 //cought
> 5
> 6 //cought
> 7
> ...
```

If you're lazy like me feel free to see the demo in [Stackblitz](https://stackblitz.com/edit/angular-ivy-clgh9e?file=src%2Fapp%2Fapp.component.ts)

Happy catching!
Square Mean Error vs. Log Loss
Tags: machinelearning, logloss, sme
Published: 2023-06-09 04:50:00

## Overview of cost functions
These two functions are used to calculate the loss and then the cost of our models. 

**Loss** being the difference between our predictions and ground labels for an instance while **cost** being the average sum of differences from our predictions.

### The following are the few over arching differences


![Comparison of Square Mean Error (SME) and Log Loss functions.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksdn3161d1ahzu3bvl3z.png)

## Formula's of each function
#### Square Mean Error
{% katex %} loss = \frac{1}{2}(\hat{y}-y)^2 {% endkatex %}
#### Log Loss
{% katex %}
 loss = - ( (y)\log{\hat{y}} + (1-y)\log{(1-\hat{y})} )
{% endkatex %}

Let's see the two functions in action:

<table>
  <tr>
    <th>y</th>
    <th>y_hat</th>
    <th>LOG LOSS</th>
    <th>SME</th>
  </tr>
  <tr>
    <td>0.1</td>
    <td>0.9</td>
    <td>2.08</td>
    <td>0.64</td>
  </tr>
  <tr>
    <td>0.2</td>
    <td>0.8</td>
    <td>1.33</td>
    <td>0.36</td>
  </tr>
  <tr>
    <td>0.3</td>
    <td>0.7</td>
    <td>0.95</td>
    <td>0.16</td>
  </tr>
  <tr>
    <td>0.4</td>
    <td>0.6</td>
    <td>0.75</td>
    <td>0.04</td>
  </tr>
  <tr>
    <td>0.5</td>
    <td>0.5</td>
    <td>0.69</td>
    <td>0.0</td>
  </tr>
  <tr>
    <td>0.6</td>
    <td>0.4</td>
    <td>0.75</td>
    <td>0.04</td>
  </tr>
  <tr>
    <td>0.7</td>
    <td>0.3</td>
    <td>0.95</td>
    <td>0.16</td>
  </tr>
  <tr>
    <td>0.8</td>
    <td>0.2</td>
    <td>1.33</td>
    <td>0.36</td>
  </tr>
  <tr>
    <td>0.9</td>
    <td>0.1</td>
    <td>2.08</td>
    <td>0.64</td>
  </tr>
</table>
package.json Vs package-lock.json
Tags: react, webdev, reactjsdevelopment
Published: 2023-06-09 03:47:32

The `package.json` and `package-lock.json` files are both related to managing dependencies in a Node.js project, but they serve different purposes. Here's a breakdown of their differences:

**1. package.json:**
- `package.json` is a file that contains metadata about the project and lists the dependencies, scripts, and other configuration details.
- It is manually created and maintained by developers.
- Developers specify the project dependencies, their versions, and other package-related information in the `dependencies` and `devDependencies` sections of `package.json`.
- It is typically committed to version control (e.g., Git) and shared with other developers.
- When another developer clones the project or runs the `npm install` command, the dependencies listed in `package.json` will be installed.

**2. package-lock.json:**
- `package-lock.json` is automatically generated by the npm or Yarn package manager when dependencies are installed or updated.
- It serves as a detailed record of the exact versions of dependencies installed in the project, including transitive dependencies (dependencies of dependencies).
- It ensures that the project is using the exact same versions of dependencies across different environments or by different developers, providing consistent builds.
- It also includes information about the resolved versions of dependencies, their integrity hashes, and the file paths where they are installed.
- `package-lock.json` should be committed to version control, ensuring that all developers working on the project have the same dependency versions.

In summary, `package.json` is a manually created file that contains metadata, dependency listings, and project configurations. It is maintained and updated by developers. On the other hand, `package-lock.json` is automatically generated and records the exact dependency versions and their resolved details. It ensures consistency and reproducibility of builds across different environments.

It's important to note that starting from npm 5, `package-lock.json` is generated by default for new projects, while earlier versions of npm generate a `npm-shrinkwrap.json` file with a similar purpose. Yarn also generates a `yarn.lock` file for the same purpose.

I hope this clarifies the differences between `package.json` and `package-lock.json`! Let me know if you have any more questions.
How to call Jenkins API
Published: 2023-06-09 03:45:24

Jenkins is a popular automation server that provides an API for interacting with its features programmatically. By making HTTP requests to Jenkins API endpoints, you can automate various tasks and integrate Jenkins with other systems or scripts. In this guide, we'll explore how to use the `curl` command-line tool to interact with Jenkins API.

Before making API requests, you'll need to obtain an API token from Jenkins. The API token acts as a credential to authenticate your requests. Here's how you can generate an API token:

1. Log in to Jenkins using your Jenkins credentials.
2. Click on your username or the user icon in the top-right corner of the Jenkins interface to access your user profile.
3. Locate the "Configure" or "Configure User" option and click on it.
4. Look for the section related to API tokens, typically labeled as "API Token" or similar.
5. Click on the "Add new Token" or similar button to generate a new API token.
6. Provide any necessary authentication or password to proceed.
7. Once the API token is generated, copy and securely store it as it may not be displayed again.

With the API token in hand, you can now use `curl` to make API requests to Jenkins. Here's an example command to call a Jenkins API endpoint:

```shell
curl -s -X GET -u ${USERNAME}:${API_TOKEN} ${JENKINS_URL}/${API_ENDPOINT}
```

Let's break down the command:

- `-s` makes `curl` silent, disabling the progress meter for script-friendly output.
- `-X GET` specifies the HTTP request method as GET. You can replace `GET` with other HTTP methods like POST, PUT, or DELETE depending on the desired action.
- `-u ${USERNAME}:${API_TOKEN}` provides the basic authentication credentials. Replace `${USERNAME}` with your Jenkins username and `${API_TOKEN}` with the API token you generated earlier.
- `${JENKINS_URL}` should be replaced with the base URL of your Jenkins instance.
- `${API_ENDPOINT}` represents the specific API endpoint you want to access. For example, to retrieve information about a job, you could use `/job/{jobName}/api/json`.

By executing this `curl` command, you can retrieve data or perform actions through Jenkins API. The response from Jenkins will be displayed in the command output.

Remember to consult the Jenkins API documentation or your Jenkins administrator for details about available endpoints, request parameters, and response formats specific to your Jenkins installation.

In summary, by leveraging `curl` and the Jenkins API token, you can easily automate and integrate Jenkins with your scripts or external applications.
How to Configure Shipping Restrictions in Magento 2
Tags: webdev, magento, magento2tutorials
Published: 2023-06-09 03:33:46

Delivering Limitations are a fundamental part of dealing with a web based business store effectively. They empower you to control the conveyance of your items and guarantee that main qualified clients get them. By setting standards, for example, area and weight, you can smooth out the transportation cycle, limit blunders, and decrease returns.

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

Magento 2 offers an easy to understand interface for designing transportation limitations, including the choice to auto select the delivery strategy in Magento 2 for clients during checkout. With an extensive variety of transportation limitation choices accessible, for example, geological area and delivery transporter, you can make tweaked limitations that meet your store's and clients' interesting necessities.

This exhaustive aide gives bit by bit directions on the most proficient method to learn **_how to configure shipping restrictions in Magento 2_**. Whether you're another client or a carefully prepared master, this guide furnishes you with the data and devices you really want to design transporting limitations for your store rapidly and proficiently.

For more info, visit **_https://webguru.dev/how-to-configure-shipping-restrictions-in-magento-2/
_**
Onetrack GPs nhà phân phối định vị ô tô xe máy
Published: 2023-06-09 03:27:38

Onetrack GPs nhà phân phối định vị ô tô xe máy
- Định vị hợp chuẩn 4G: https://onetrackgps.vn/dinh-vi-hop-chuan-4g-3t01/
-Định vị xe máy 4G: https://onetrackgps.vn/dinh-vi-xe-may-4g/
-Map: https://goo.gl/maps/ap4JPppKzKEarLDF6
-Hotline: 0975728770
Web: https://onetrackgps.vn/
100 Days Coding Challenge - Day 20: FreeCodeCamp JavaScript Algorithms and Data Structures
Tags: webdev, javascript, programming, 100daysofcode
Published: 2023-06-09 03:02:14

## Day 20

Today I finish the functional programming section, its a little confusing honestly, I have to practice more, but now I will go to Intermediate Algorithm Scripting :D


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc9qy2mbtbmznv3kmltq.png)
5 Things I wish I knew sooner
Tags: beginners, devjournal, startup, entrepreneur
Published: 2023-06-09 01:32:00

5 Things I wish I knew sooner:

1. Focus on saving time instead of saving money

2. Look forward to new experiences instead of possessing material things

3. Working in a startup does not teach you everything about building a startup

4. Starting and running a successful business is often a marathon, not a sprint

5. Marketing is all about building trust with your audience


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

Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more about DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
NestJS tip: how to disable initialization logging
Tags: node, programming, nestjs
Published: 2023-06-09 00:44:17

> for NestJS v8, v9 and v10

For big NestJS apps we might see a bunch of initialization logs like the following:

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

![useless typeorm logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6hyglhbcgq8pqoja39c.png)

In some environments those messages are nothing but noise to the log management tool. Note that I'm referring to those emitted with the `.log` method of the built-in `Logger` class from `@nestjs/common`

By following the nestjs docs on Logger: https://docs.nestjs.com/techniques/logger we can find out on how to omit such logs, as follows:

Create a custom logger that inherits from the built-in `ConsoleLogger` and declare that it will do nothing if the supplied context is a internal one (ie, from `@nestjs/core`)

```ts
// ...
import { ConsoleLogger } from '@nestjs/common'

/**
 * A custom logger that disables all logs emitted by calling `log` method if
 * they use one of the following contexts:
 * - `InstanceLoader`
 * - `RoutesResolver`
 * - `RouterExplorer`
 * - `NestFactory`
 */
export class InternalDisabledLogger extends ConsoleLogger {
  static contextsToIgnore = [
    'InstanceLoader',
    'RoutesResolver',
    'RouterExplorer',
    'NestFactory', // I prefer not including this one
  ]

  log(_: any, context?: string): void {
    if (!InternalDisabledLogger.contextsToIgnore.includes(context)) {
      super.log.apply(this, arguments)
    }
  }
}
```

Then, at your bootstrap function, use that logger instead

```ts
// ...
const app = await NestFactory.create(AppModule, {
  logger: new InternalDisabledLogger(),
})
```
What is the point of the user-ID **and** username in the URL to a user's profile on StackOverflow?
Tags: question, stackoverflow, watercooler
Published: 2023-06-09 00:27:54

I just noticed that, on StackOverflow, the URL for a user's profile includes both the numerical ID of the user and the URL-safe version of their username (`/users/<user-id>/<username>`)
For example, the appropriate path to my account is `/users/10963964/katty-t-enby-cat`.

When I remove the username portion from the URL, it just redirects me, making it as if I had kept the username. However, when I remove the ID, I get a "Page not found." page.
Additionally, when I click on any of the buttons saying "Summary", "Answers", "Tags", etc... it does not change where the URL points to, it just adds a query parameter (`tab`) at the end of the URL.

So, my question is: what is the point of putting the username in the URL if `/users/<user-id>/` leads to `/users/<user-id>/<username>` anyways?



<b><center><b>Thanks!<br/>Cheers!</b></center></b>