teleren/devto huggingface dataset:
Conditional Statements in React: If-else, Switch, Break
Published: 2023-04-29 16:19:27

React is a popular JavaScript library that allows developers to build complex user interfaces quickly and efficiently. One of the most critical aspects of programming in React is the use of conditional statements, which allow developers to control the behavior of their applications based on certain conditions. In this article, we will explore two types of conditional statements that are commonly used in React: if-else statements and switch-break statements.
1. If-Else Statements in React
`function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}`

2. Switch-Break Statements in React
`function DayOfWeek(props) {
  const day = props.day;
  switch (day) {
    case 0:
      return <h1>Sunday</h1>;
    case 1:
      return <h1>Monday</h1>;
    case 2:
      return <h1>Tuesday</h1>;
    case 3:
      return <h1>Wednesday</h1>;
    case 4:
      return <h1>Thursday</h1>;
    case 5:
      return <h1>Friday</h1>;
    case 6:
      return <h1>Saturday</h1>;
    default:
      return null;
  }
}`

3. Break Statements in Switch Statements
`function calculateDiscount(level) {
  let discount = 0;
  switch (level) {
    case 'Gold':
      discount = 0.2;
      break;
    case 'Silver':
      discount = 0.1;
      break;
    case 'Bronze':
      discount = 0.05;
      break;
    default:
      break;
  }
  return discount;
}`

Read More Article Click [Here](https://techzpad.com/conditional-statements-in-react)
Named Parameters en JavaScript: Mejorando la Legibilidad y Extensibilidad de tus Funciones
Tags: javascript, programming, learning, webdev
Published: 2023-04-29 15:14:59

En el mundo del desarrollo de software, una de las principales preocupaciones es la legibilidad y extensibilidad del código. En JavaScript, las funciones son un componente fundamental en la creación de software y es por eso que es importante escribirlas de tal manera que sean fáciles de leer y extender. En este artículo, vamos a explorar cómo los **Named Parameters** pueden ayudarnos a lograr este objetivo.

Los **Named Parameters** son una técnica que nos permite pasar los parámetros de una función utilizando un objeto en lugar de una lista de argumentos. En lugar de pasar argumentos posicionales, le pasamos un **objeto** que contiene los parámetros, donde cada propiedad del objeto es un parámetro y su valor es el valor correspondiente de ese parámetro. Esto permite que la función sea más fácil de entender, ya que no tienes que preocuparte por el orden de los argumentos.

Para ilustrar esto, imaginemos que tenemos una función llamada "_createPerson_" que toma tres argumentos: "_name_", "_age_" y "_gender_". Si queremos llamar a esta función, tendríamos que hacerlo de la siguiente manera:

```

createPerson('John', 30, 'Male');

```

Sin embargo, si utilizamos **Named Parameters**, podemos hacerlo de la siguiente manera:

```

createPerson({name: 'John', age: 30, gender: 'Male'});

```
Esto hace que la función sea más fácil de entender y también más fácil de extender en el futuro. Si en algún momento necesitamos añadir más parámetros a esta función, simplemente podemos añadirlos al objeto y la función seguirá funcionando sin ningún problema.

Además, utilizando **Named Parameters** podemos hacer que algunos parámetros sean opcionales. Por ejemplo, si quisiéramos hacer que el parámetro "_weight_" fuera **opcional** y tuviera un valor **por defecto** de 200, podríamos hacer lo siguiente:

```
function createMonster({color, weight = 200, sound, powers, material}) {
  // ...
}
```
De esta manera, si no especificamos un valor para "_weight_", se utilizará el valor por defecto de 200.

Es importante destacar que aunque los **Named Parameters** pueden hacer que el código sea más legible y extensible, **no es necesario** utilizarlos en todas las funciones. En general, es recomendable utilizarlos en funciones con **más de tres parámetros**, ya que a partir de este punto puede resultar difícil recordar el orden de los argumentos.

<a href="https://www.buymeacoffee.com/rubenalap" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
ChatGPT Plugin Starter TypeScript NextJS
Tags: chatgpt, nextjs, typescript, api
Published: 2023-04-29 15:13:11

In the world of AI development, there are plenty of Python examples but far fewer in Typescript/Javascript.

This is starter app for building ChatGPT plugins in typescript. It uses the new Next 13 app routes, which are still "beta" so use at your own risk! Clone / star / fork the repo here: https://github.com/gannonh/chatgpt-plugin-starter-nextjs

## ChatGPT Plugins

ChatGPT Plugins are an alpha feature of ChapGPT and you need to join the [waitlist](https://openai.com/waitlist/plugins) to get access. Once granted access you'll get an email from OpenAI and the plugins interface will be available to you in ChatGPT. While not ideal, you can begin developing plugins (which are simply API routes) without access.

OpenAI plugins connect ChatGPT to third-party applications. These plugins enable ChatGPT to interact with APIs, enhancing ChatGPT's capabilities and allowing it to perform a wide range of actions. Developing ChatGPT plugins involves building an API accompanied by a standardized manifest file and an OpenAPI specification. These define the plugin's functionality, allowing ChatGPT to make calls to you API routes. ChatGPT plugin APIs follow the OpenAPI specification (OpenAPI, aka Swagger, not OpenAI!), which allows ChatGPT to automatically generate a UI for the plugin. This UI is used to configure the plugin and to display the plugin's output. For more information on ChatGPT plugins, see the [documentation](https://platform.openai.com/docs/plugins/introduction).

## Getting started

Like the OpenAI Python starter, this is a simple ToDo app, meant to jumpstart your own efforts building a nextJS based API. To get started:

### 1. Clone (or fork) [the repo](https://github.com/gannonh/chatgpt-plugin-starter-nextjs) and install dependencies

```sh
gh repo clone gannonh/chatgpt-plugin-starter-nextjs

cd chatgpt-plugin-starter-nextjs

npm install
```

### 2. Build and run the API

```sh
npm run build
npm run start
```

> ⚠️ In dev mode (`npm run dev`) I had issues with memory/state persistence, so I recommend running in production mode

### 3. Register your plugin for local access/development

- In ChatGPT select "Plugins ALPHA" from the Model dropdown, and then "plugin store" from the Plugins dropdown.
- Click "Develop your own plugin" (not install unverified plugin)
- Enter localhost for the URL (eg, http://localhost:3000)

## Usage

Here are some commands you can try

- What are my todos?
- Add build a chatgpt plugin to my todos
- How many open todos do I have?

## Deploy with Vercel
Click the button below to deploy on Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fgannonh%2Fchatgpt-plugin-starter-nextjs)
Revolutionizing Web Design: What's the Coolest CSS Trick You've Used or Seen in 2023?
Tags: discuss, webdev, css, tutorial
Published: 2023-04-29 15:12:30


Join the conversation and share your top picks of the most innovative and creative uses of CSS in web design that you've come across or implemented in 2023. Have you seen a website that blew your mind with its CSS features? Or maybe you've used a new CSS technique that took your web design game to the next level? Whatever your experience, we want to hear from you! Let's dive into the future of CSS in web design together!
Issue Page loaded two time on blazor server side?
Tags: dotnet, programming
Published: 2023-04-29 15:07:03

I work on blazor server side . I face Issue page reload after open and reload automatically

so page loaded two times Why flicker happen on loaded page

and How to solve this issue

this not happen on one page this is happen on all application pages

sample code for page Dashboard happen this issue on it

protected override async Task OnInitializedAsync()
    {
        
            await getcountServers();
            await getcountDatabases();
            await RefreshDropDownListFilter();
          
            await RefreshDropDownListOwnerFilter();
            await RefreshDropDownListDatabaseFilter();
            await SearchFilter();
            await GetFirstCharachter();
           
    }


protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            
            if (firstRender)
            {
                
            }

        }
on _Host file

@page "/"

<head>
   
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UC.AppRepository.UI</title>
    <base href="~/" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <link rel="stylesheet" href="~/assets/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorUI.styles.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

    <script src="~/js/jquery-3.6.3.js"></script>
   
</head>
<body>
   
   
    
    
    
    <component type="typeof(App)" render-mode="ServerPrerendered" />

       
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
   @* <script src="_content/BlazorInputFile/inputfile.js"></script>*@
@*    <script src="~/assets/js/insertdata.js"></script>*@
    
    <script src="_framework/blazor.server.js"></script>
What are some of your Kubernetes best and worst fits?
Tags: discuss, kubernetes, containers
Published: 2023-04-29 15:00:25

I'm currently brushing up on Kubernetes to increase my overall skill set. While many courses touch up on Kubernetes architecture and usage they don't really cover the business case for it too much. With that in mind I'd like to ask about the following for people using Kubernetes in a business of any size:

- What were business cases where Kubernetes really worked out for you?
- What were business cases where Kubernetes didn't seem like the best choice?
- What were business cases that caused a transition from Kubernetes to something else?

This includes both base Kubernetes usage and usage of Kubernetes in a managed service type setting (AWS, Google Cloud, Azure, etc.). If it's the managed service setting I'd love to know what service was being used. Thanks for everyone's input on this!
What are some of the most innovative uses of CSS that you've seen in 2023?
Tags: css, webdev, discuss, productivity
Published: 2023-04-29 14:58:44

CSS has come a long way, and we're excited to see how developers have been using it in innovative ways in 2023. Have you come across a website that has blown you away with its use of CSS to enhance the user experience? Or maybe you've implemented a new CSS technique that has helped you achieve your design goals. We want to hear from you!

Share your thoughts, examples, techniques, and ideas on the most innovative uses of CSS that you've seen or implemented in 2023 in the comments below. Let's spark a discussion on the future of CSS in web design and inspire each other to create even more stunning websites!
Bike Loan Emi calculator
Published: 2023-04-29 14:56:01



A bike loan EMI (Equated Monthly Installment) calculator is a useful tool that can help you determine the monthly payments you would need to make towards your bike loan. This calculator takes into account several factors, including the loan amount, interest rate, and loan tenure, and gives you an estimate of the EMI amount.

Using a [bike loan EMI calculator](https://anytool.app/finance/bike-loan-emi-calculator) can be very helpful when you are planning to take a bike loan. It can help you determine how much you can afford to borrow and what your monthly payments will be. This can help you make an informed decision about whether a particular loan is suitable for you or not.

To use a [bike loan EMI calculator](https://anytool.app/finance/bike-loan-emi-calculator), you will need to provide certain information such as the loan amount, interest rate, and loan tenure. Once you enter these details, the calculator will calculate the EMI amount and show you the total amount payable over the loan tenure.

There are several benefits of using a [bike loan EMI calculator](https://anytool.app/finance/bike-loan-emi-calculator). Firstly, it can help you save time and effort as you can quickly calculate the EMI amount online. Secondly, it can help you plan your finances better as you will have a clear idea of how much you need to set aside each month for loan repayment. Finally, it can help you compare different loan offers and choose the one that best suits your requirements.

When using a bike loan EMI calculator, it is important to remember that the result is only an estimate and not the final amount. The actual EMI amount may vary depending on various factors such as processing fees, prepayment charges, and late payment fees. Therefore, it is always advisable to read the loan terms and conditions carefully before applying for a bike loan.

In conclusion, a bike loan EMI calculator is a handy tool that can help you determine the EMI amount for your bike loan. It can save you time and effort, help you plan your finances better, and make an informed decision about your loan. However, it is important to use it as a guide and not rely solely on the results provided by the calculator.
React Profiler: "Timeline profiling not supported"?
Tags: react
Published: 2023-04-29 14:55:31

I'm debugging my React app on Mac using Chrome. I've installed React 18, and the latest React Devtools Chrome extension:

[![enter image description here][1]][1]

When I go to the React Profiler tab and click the record button, I see:

> Timeline profiling not supported. Timeline profiler requires a
> development or profiling build of react-dom@^18.
> 
> Click here to learn more about profiling.

Okay, so I go to [the React docs][2] and it talks about adding a `<Profiler>` component. I did that and still get the same error.

React is running in dev mode. Here's a screen shot of a dialog provided by React Dev Tools. 

[![enter image description here][3]][3]

Here's the complete code I'm using to include React in my app:

    import React from 'react'
    import {createRoot} from 'react-dom/client';
    import {App} from '../../client/ui/router'
    import {BrowserRouter} from "react-router-dom";
    
    
    function onRender(
        id, // the "id" prop of the Profiler tree that has just committed
        phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
        actualDuration, // time spent rendering the committed update
        baseDuration, // estimated time to render the entire subtree without memoization
        startTime, // when React began rendering this update
        commitTime, // when React committed this update
        interactions // the Set of interactions belonging to this update
    ) {
        // Aggregate or log render timings...
        console.log({
            id,
            phase,
            actualDuration,
            baseDuration,
            startTime,
            commitTime,
            interactions
        });
    }
    
    
    const container = document.getElementById('app');
    const root = createRoot(container);
    root.render(
        <BrowserRouter>
            <React.Profiler id="App" onRender={onRender}>
                <App />
            </React.Profiler>
        </BrowserRouter>
    )

What changes do I need to make, to get React Profiler working?



  [1]: https://i.stack.imgur.com/1YRKb.png
  [2]: https://react.dev/reference/react/Profiler#caveats
  [3]: https://i.stack.imgur.com/s9e4E.png
JavaScript for of loop tutorial
Tags: javascript, programming, tutorial, codenewbie
Published: 2023-04-29 14:51:11

In JavaScript, the [for of loop is another way of iterating over an iterable object](https://www.programdoc.com/javascript/for-of-loop) like an array, string, or set. It was introduced in ES6 and offers an alternative to the traditional for loop and for...in loop.

## Syntax for a for of loop
```js
for (let value of iterable) {
  // code block
}
``` 

Here, `value` is a variable that takes the value of the element in each iteration of the loop, and `iterable` is an object that has iterable properties, such as an array or a string.

## for of loop Iterate over array
Iterating over an Array Let's start with an example of how to use the for...of loop to iterate over an array:

```js
const numbers = ['one', 'two', 'three'];

for (let number of numbers) {
  console.log(number);
}
``` 

In this example, we have an array of numbers, and we use the for of loop to iterate over each element of the array and log it to the console.

**Output**
```js
one
two
three
``` 
## for of loop Iterate over string
Iterating over a String You can also use the for of loop to iterate over a string

```js
const hello = 'Hello World';

for (let chr of hello) {
  console.log(chr);
}
``` 

We use the for of loop to iterate over each character in the string and log it to the console.

**Output**
```js
H
e
l
l
o
 
W
o
r
l
d
``` 

## for of loop Iterate over Map
Iterating over a Map The for of loop can also be used to iterate over a Map object

```js
const numbers = new Map([
  ['One', 1],
  ['Two', 2],
  ['Three', 3]
]);

for (let [word, number] of numbers) {
  console.log(`word: ${word} number: ${number}`);
}
``` 

**Output**
```js
word: One number: 1
word: Two number: 2
word: Three number: 3
``` 

[Learn JavaScript tutorial](https://www.programdoc.com/javascript/intro)
Microsoft Excel Tutorial
Tags: excel, training, course, certification
Published: 2023-04-21 05:16:29

In order to manage data manipulations like arithmetic operations, spreadsheets like Microsoft Excel use a grid of cells arranged in numbered rows and letter-named columns. It has a variety of built-in functionalities to address financial, engineering, and statistical requirements. Additionally, it has a very limited three-dimensional graphical display and can present data as line graphs, histograms, and charts. Using pivot tables and the scenario manager, it enables segmenting of data to view its reliance on multiple parameters for diverse viewpoints. A data analysis tool is a pivot table. This is accomplished by using PivotTable fields to condense big data sets. It features a programming component called Visual Basic for Applications that enables the user to use a wide range of numerical techniques, such as for After resolving mathematical physics differential equations, the spreadsheet is updated with the findings. Additionally, it offers a number of interactive features. allowing user interfaces that can completely conceal the spreadsheet from the user. As a result, the spreadsheet appears to the user as a so-called application, or decision support system (DSS), via a specially designed user interface, such as a stock analyzer or, more generally, as a design tool that queries the user and returns results and reports. In a more complex implementation, an Excel program can automatically query external databases and measuring devices in accordance with a timetable for updates, analyze the data, create a Word report or a PowerPoint slide show, and send out these presentations on a regular basis to a list of participants. Excel wasn't intended for to be used as a database.

[Know More About Microsoft Excel](https://www.youtube.com/watch?v=_XQMA9S3_OY)

[The Knowledge Academy YouTube Channel](https://www.youtube.com/@TheKnowledgeAcademy./videos)

[The Knowledge Academy Official Website.](https://www.theknowledgeacademy.com/)
What you learning about this weekend?
Tags: codenewbie, discuss, learning, beginners
Published: 2023-04-29 14:00:00

Howdy! 🤠

What y'all learning on this weekend?

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.

Whatever ya do, remember to take breaks and treat yourself for working so dang hard!

![A cartoon woman bites her tongue and taps away at the keyboard while deep in thought.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5vmuhhg6xtgtsypn6mb.gif)
This Week In Python
Published: 2023-04-29 13:59:31


**Fri, April 14, 2023**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 

**I have received some good suggestions for this week's content. Thank you.**

**Did I miss anything from the Python universe this week? What did you read or tried out?**


## Python Articles


- [Debugging a Mixed Python and C Language Stack](https://developer.nvidia.com/blog/debugging-mixed-python-and-c-language-stack/)
- [What's up in the Python community?](https://bitecode.substack.com/p/whats-up-in-the-python-community) – by @bitecode_dev 
- [Python 3.10 runtime now available in AWS Lambda](https://aws.amazon.com/de/blogs/compute/python-3-10-runtime-now-available-in-aws-lambda/)
- [Dependency Injection in Python](https://itnext.io/dependency-injection-in-python-a1e56ab8bdd0)
- [Improve your Django Code with pre-commit](https://builtwithdjango.com/blog/improve-your-code-with-pre-commit)



## Projects


- [Debugging a Mixed Python and C Language Stack](https://developer.nvidia.com/blog/debugging-mixed-python-and-c-language-stack/)
- [What's up in the Python community?](https://bitecode.substack.com/p/whats-up-in-the-python-community) – by @bitecode_dev 
- [Python 3.10 runtime now available in AWS Lambda](https://aws.amazon.com/de/blogs/compute/python-3-10-runtime-now-available-in-aws-lambda/)
- [Dependency Injection in Python](https://itnext.io/dependency-injection-in-python-a1e56ab8bdd0)
- [Improve your Django Code with pre-commit](https://builtwithdjango.com/blog/improve-your-code-with-pre-commit)


**Did I miss anything from the Python universe this week? What did you read or tried out?**
Created VS Code extension: "Embed images in markdown".
Tags: vscode, extension, markdown
Published: 2023-04-29 13:38:21

---
title: Created VS Code extension: "Embed images in markdown".
published: true
description: I have developed and published a VS Code extension that embeds image files into Markdown files via drag-and-drop.
tags: vscode, extension, markdown
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-29 13:26 +0000
---

I have been wanting to embed JPEGs and PNGs in Markdown instead of PlantUML and Mermaid for a while, and I came up with a way to do it, so I implemented it.

Although the file size will be larger and the Markdown source will be very ugly, it has the advantage of storing multiple image files in one Markdown file.

Perhaps a similar extension already exists, but I couldn't find it after a little searching, so I decided to develop it.

This extension is published on the marketplace.

Marketplace: [Embed images in markdown](https://marketplace.visualstudio.com/items?itemName=hidao80.embed-images-in-markdown)

![](https://user-images.githubusercontent.com/8155294/219820928-a38088bd-a8f4-465e-9117-30a17216f3b3.gif)

postscript:
It looks like a similar technique could be used to embed zip files in markdown files, but I have a feeling it could be used for some evil purpose...