teleren/devto huggingface dataset:
Typescript utility types: unleashing the power of TS generics
Tags: typescript, javascript, webdev, frontend
Published: 2023-09-27 03:17:02

Typescript utility types are one of the most useful typing features in Typescript that you will see everywhere in open source projects and that you will definitely start using once I teach them to you today.

Without further ado, let’s dive straight into it.

## Partial
Makes all the fields in the interface/type optional.

```tsx
type Car {
  id: string
  name: string
}
Partial<Car> 
// {
//   id?: string | undefined
//   name?: string | undefined
// }

```

## Required

The opposite of Partial, it makes all the fields required (even the optional ones)

```tsx
type Car {
  id: string
  name?: string
}
Required<Car> 
// {
//   id: string
//   name: string
// }
```

## Omit

Removes properties from a type/interface

```tsx
type Car {
  id?: string
  name: string
  weight: number
}
Omit<Car, "id" | "name"> 
// {
//   weight: number
// }
```

## Pick

Picks only the properties specified from the type/interface

```tsx
type Car {
  id?: string
  name: string
  weight: number
}
Pick<Car, "id" | "name"> 
// {
//   id: string
//   name: string
// }
```

## Readonly

Makes all the properties readonly.

```tsx
type Car {
  id?: string
  name: string
  weight: number
}
Readonly<Person> 
// {
//   readonly id?: string
//   readonly name: string
//   readonly weight: number
// }
```

## Awaited

Unwraps the return type of the promise

```tsx
type StringPromise = Promise<string>
type Result = Awaited<StringPromise> 
// Result type is string
```

## ReturnType

Gets the return type of a function

```tsx
type Func = (a: string) => number;
type ReturnValue = ReturnType<Func>
// ReturnType type is number
```

## NonNullable

Removes null and undefined from union types

```tsx
type MaybeString = string | null | undefined
type DefinitelyString = NonNullable<MaybeString>
// DefinitelyString type is string
```


Happy coding!
Mazen
My Youtube channel: [@WebDevKit](https://youtube.com/@webdevkit?si=Swp7azQI8ifOaDSC)
My Github: [@djzenma](https://github.com/djzenma)
My twitter: @djzenma
Webpack compilation error "Critical dependency: the request of a dependency is an expression" solution
Tags: webdev, javascript, webpack, node
Published: 2023-09-27 02:58:10

Webpack compilation error "Critical dependency: the request of a dependency is an expression" solution

When using webpack for packaging, if you encounter the following require syntax:

```
var mx = require("hpargxm".split("").reverse().join(""));
```
compilation will fail with a prompt of “Critical dependency: the request of a dependency is an expression”


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


This require syntax is correct, but webpack cannot process expressions in require, only strings, such as:

```
var mx = require('mxgraph');
```

This is because webpack needs to determine the file being referred to by require and read and merge its contents. As webpack cannot execute JavaScript code, when the content of require is an expression, webpack cannot correctly obtain file information. This is an inevitable bug of webpack, and the solution is for webpack to have the ability to execute JavaScript code. For example, it can embed a small JavaScript engine to parse the content of the expression. 

In practical programming, if this problem occurs, you can simply modify the expression in the require to a string. In addition, when performing JavaScript code obfuscation, this bug of webpack may also be caused. The solution is to avoid using specific characters. For example, when using JShaman for JavaScript code obfuscation, you can configure "reserved words" to exclude specific strings from encryption.
Maulik Nayak: The Indian Virtuoso - Actor, Singer, and Musician Extraordinaire
Tags: music, actor, singer
Published: 2023-09-27 02:22:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhumv8238ce1egv1a0t2.jpg)
India has been a land of artistic brilliance, with a rich tapestry of talent that has consistently enthralled the world. One name that stands out prominently in this realm of artistic virtuosity is Maulik Nayak. This multi-talented individual has left an indelible mark on the Indian entertainment industry with his exceptional prowess as an actor, singer, and musician. Let's delve into the world of this extraordinary artist and explore the facets of his remarkable career.

A Versatile Actor:

[Maulik Nayak Journey](https://www.mauliknayak.com/) into the world of acting has been nothing short of spectacular. His ability to seamlessly transition into diverse roles, coupled with his impeccable acting skills, has earned him a dedicated fan base. Whether he's portraying a lovable character in a heartwarming drama or delving into complex and intense roles, Nayak's performances are nothing short of captivating. His nuanced expressions and ability to connect with audiences have made him a standout talent in the Indian film and theater industry.

The Mesmerizing Singer:

Nayak's talents extend beyond the realm of acting. He is also a gifted singer whose melodious voice has won the hearts of music enthusiasts. His ability to convey emotions through his singing is nothing short of magical. Whether it's a soul-stirring melody or an upbeat track, Nayak's versatility as a singer is a testament to his dedication to his craft. His songs have found a special place in the playlists of music aficionados across the country.

Master of Musical Instruments:

But Nayak's talents don't stop at acting and singing. He is also a proficient musician who has mastered several musical instruments. His command over instruments like the tabla, sitar, and flute showcases his deep-rooted connection with Indian classical music. Nayak's performances with these instruments are a testament to his commitment to preserving and promoting the rich heritage of Indian music.

A Beacon of Inspiration:

Maulik Nayak's journey from a young artist with dreams to a versatile virtuoso is nothing short of inspirational. His dedication to his craft, coupled with his unwavering passion, serves as a beacon of hope for aspiring artists. Nayak's ability to excel in multiple artistic disciplines serves as a reminder that talent knows no boundaries and that true artists are driven by their unrelenting love for the arts.

In conclusion, [Maulik Nayak is an Indian, Actor, Singer and Musicianis](https://www.mauliknayak.com/) a shining star in the firmament of Indian artistry. His versatility as an actor, singer, and musician extraordinaire has left an indelible mark on the Indian entertainment industry. Nayak's commitment to his craft, coupled with his innate talent, makes him a true virtuoso. As he continues to enthrall audiences with his performances, we eagerly await the next chapter in the remarkable career of Maulik Nayak, the Indian virtuoso.
TipsCôngNghệ Net
Published: 2023-09-27 02:16:31

https://tipscongnghe.net/ là trang cung cấp những tin tức mới nhất về công nghệ, bên cạnh đó là những kiến thức, review, thủ thuật hay nhất xoay quanh công nghệ số
Thông tin Liên Hệ:
Địa Chỉ: 93 Ngõ 133 Phố Tân Ấp, Phúc xá, Ba Đình, Hà Nội, Việt Nam
Điện Thoại: 0812619734
Website: https://tipscongnghe.net/
Email: tipscongnghenet@gmail.com
Social
Twitter: https://twitter.com/tipscongnghenet
Reddit: https://www.reddit.com/user/tipscongnghenet
Linkedin: https://www.linkedin.com/in/tipscongnghenet/
Youtube: https://www.youtube.com/@tipscongnghenet/about
Twitch: https://www.twitch.tv/tipscongnghenet/about
Dribble: https://dribbble.com/tipscongnghenet/about
Desenvolvimento de portifólio
Tags: javascript, css, html, programming
Published: 2023-09-27 01:10:36

**Introdução**
Inicio do desenvolvimento do meu portifólio. 

**Aprendizado**
Foram desenvolvidos os seguintes tópicos:

- Criação do projeto
- Criação da página Home
- Adicionado as demais seções e o esqueleto da página

**Código realizado:**
(https://github.com/dsfhigor/dsfhigor.github.io)
A simple canvas drawing web application with responsive UI
Tags: drawing, canvas, nextjs, typescript
Published: 2023-12-27 18:31:39

---
title: A simple canvas drawing web application with responsive UI
published: true
date: 2023-09-27 00:07:00 UTC
tags: Drawing,Canvas,Nextjs,TypeScript
canonical_url: https://reactjsexample.com/a-simple-canvas-drawing-web-application-with-responsive-ui/
---

# Flatdraw
 ![A simple canvas drawing web application with responsive UI](https://reactjsexample.com/content/images/2023/09/Code_2023-09_21-02-30.jpg)

A simple canvas drawing web application with responsive UI. Built using [TypeScript](https://typescriptlang.org), [React](https://react.dev), and [Next.js](https://nextjs.org).

**Live demo:** [flatdraw.com](https://flatdraw.com)

[![A simple canvas drawing web application with responsive UI](https://github.com/awesomedev08/flatdraw-nextjs/raw/main/docs/screenshot.png)](https://flatdraw.com)

## Requirements

- [Node.js](https://nodejs.org) (the specific version is defined in the [`.nvmrc`](https://github.com/awesomedev08/flatdraw-nextjs/blob/main/.nvmrc) file)

## Getting started

Copy the content of `.env.example` to a new `.env` file and fill in the required environment variables. You can get your Unsplash API keys [here](https://unsplash.com/developers).

```
cp .env.example .env
```

Install all the dependencies.

```
npm install
```

Run the development server.

```
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## License

Open source under the terms of the [MIT License](https://github.com/awesomedev08/flatdraw-nextjs/blob/main/LICENSE).

## GitHub

[View Github](https://github.com/awesomedev08/flatdraw-nextjs?ref=reactjsexample.com)
A React Application that is used to search for free tools
Tags: apps, search
Published: 2023-12-27 18:31:45

---
title: A React Application that is used to search for free tools
published: true
date: 2023-09-27 00:05:00 UTC
tags: Apps,Search
canonical_url: https://reactjsexample.com/a-react-application-that-is-used-to-search-for-free-tools/
---

 ![A React Application that is used to search for free tools](https://reactjsexample.com/content/images/2023/09/Code_2023-09_21-00-51.jpg)

Welcome DevLabs is a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community. On DevLabs, you can discover a collection of free tools that can assist you in various aspects of your life. Moreover, you have the opportunity to contribute to this project by adding more tools to the database.

You can check out the live project at [https://DevLabs-one.vercel.app](https://DevLabs-one.vercel.app)

![A React Application that is used to search for free tools](https://user-images.githubusercontent.com/83147410/269832583-a508cf73-6724-46d3-a66d-6b9a7811bfdd.png)

DevLabs Our website is one such kind that provides a platform for contributors from all over the world to give their inputs in the form of useful websites which are free to use. It enables us to get a list of all the websites together in one place thereby saving a lot of time for us. We can find any kind of website here, be it a tool or an education platform. Hence, it is declared a knowledge-sharing platform!

Tech Stack Reactjs – Reactjs is a JavaScript library for building user interfaces. 🚀 Quick start Contributions are welcome! If you have any ideas, suggestions, or bug fixes, please open an issue or submit a pull request. Make sure to follow the project’s code of conduct.

## GitHub

[View Github](https://github.com/HimanshuNarware/Devlabs?ref=reactjsexample.com)
Generate React and Tailwind components using AI
Tags: generator
Published: 2023-12-27 18:31:52

---
title: Generate React and Tailwind components using AI
published: true
date: 2023-09-27 00:04:00 UTC
tags: Generator
canonical_url: https://reactjsexample.com/generate-react-and-tailwind-components-using-ai/
---

# Rapidpages
 ![Generate React and Tailwind components using AI](https://reactjsexample.com/content/images/2023/09/Code_2023-09_21-58-23.jpg)

Rapidpages is a prompt-first IDE for building great-looking pages. You simply describe the UI you desire and it will generate the code for that component using the technologies that are familiar to you (currently only React+Tailwind are supported).

[View Demo](https://rapidpages.vercel.app/new)[View Github](https://github.com/rapidpages/rapidpages?ref=reactjsexample.com)

## 

### 

```
git clone https://github.com/rapidpages/rapidpages.git && cd rapidpages
```

Edit the `.env.example` file to ensure the following values are set:

- OPENAI\_API\_KEY: you need to get a key from [OpenAI](https://platform.openai.com/)
- GITHUB\_CLIENT\_SECRET & GITHUB\_CLIENT\_ID: you need to create a GitHub oauth application to be able to login. Follow [this guide](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) from GitHub.

Create the database & run the application

```
npm run db:push
npm run dev
```

### 

You can start using [Rapidpages](https://www.rapidpages.io) today on the cloud for free. If you run out of credits, feel free to ping us on [discord](https://discord.gg/W6jYq46Frd).

## 

Currently, the components are generated in one shot. In the future, this task will be broken down into multiple steps such as dependency retrieval and icon generation. This multi-step process will allow the creation of more complicated ui elements.
How to Determine the Entrypoint for a Docker Image
Tags: docker
Published: 2023-11-16 03:21:32

---
title: How to Determine the Entrypoint for a Docker Image
published: true
date: 2023-09-27 00:00:00 UTC
tags: docker
canonical_url: https://nelson.cloud/how-to-determine-the-entrypoint-for-a-docker-image/
---

You can use `docker inspect` to determine the entrypoint of a docker image.

The command looks like this:

```
docker inspect --type=image --format='{{json .Config.Entrypoint}}' <image-name> 
```

And here’s a real-world example (assuming you have the `hashicorp/terraform` image downloaded):

```
docker inspect --type=image --format='{{json .Config.Entrypoint}}' hashicorp/terraform

["/bin/terraform"]
```

There are some examples on the [official docs](https://docs.docker.com/engine/reference/commandline/inspect/) but none of the examples covered my use cases, so here are some additional useful `docker inspect` examples using the `busybox` image.

List environment variables:

```
docker inspect --type=image --format='{{json .Config.Env}}' busybox

["PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"]
```

List the `CMD`:

```
docker inspect --type=image --format='{{json .Config.Cmd}}' busybox

["sh"]
```

Print out the architecture:

```
docker inspect --type=image --format='{{json .Architecture}}' busybox

"amd64"
```

The `docker inspect` command can also be used to inspect other docker resources too, not just images. Check out the documentation for more information.

References:

- [https://docs.docker.com/engine/reference/commandline/inspect/](https://docs.docker.com/engine/reference/commandline/inspect/)
What Are the Top 3 Qualities of Successful Devs?
Tags: discuss
Published: 2023-09-27 00:00:00

---
published_at : 2023-09-27 00:00 +0000
---
_Hey, hey, it's the Daily Byte! Over the next several days, we'll be talking about developer roles, success taits, and the future ahead._  

>  What are the top three qualities or skills that define a successful developer in today's fast-paced industry?


Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Introdução ao expo-dev-client
Tags: expo, beginners, reactnative, braziliandevs
Published: 2023-09-26 23:19:21

## Introdução

Se você iniciou no desenvolvimento de apps com Expo, deve ter notado que ele facilita muito alguns dos processos do React Native, sendo uma ferramenta conhecida por simplificar o desenvolvimento de aplicativos móveis, atuando desde em configurações do seu ambiente até em deploy dos seus aplicativos.

No entanto, em alguns momentos você provavelmente vai sentir falta de ter um controle maior do seu desenvolvimento ou querer utilizar de algumas bibliotecas que precisam de dependências nativas e não são suportadas diretamente pelo Expo, esse é um problema comum e para resolver ele podemos utilizar da ferramenta [expo-dev-client](https://www.npmjs.com/package/expo-dev-client?activeTab=readme)

## O que é o expo-dev-client

O expo-dev-client é um package da própria Expo que permite você a utilizar dependências nativas em sua aplicação, não ficando mais limitado apenas as libs do Expo e tendo uma experiência de desenvolvimento "quase nativa".

Alguns exemplos de bibliotecas que requerem de código-fonte nativo personalizado são a [React Native Firebase](https://docs.expo.dev/develop/development-builds/introduction/) e o [Realm](https://www.mongodb.com/docs/realm/sdk/react-native/quick-start/), ou seja, caso você queira utilizar algumas delas e ainda continuar utilizando do Expo, o expo-dev-client vai se tornar uma ferramenta útil para você.

Para iniciar o seu uso os passos são bem simples:

1. Instale o package com o seguinte comando:

    ```node
    npm i expo-dev-client
    ```


2. Gere então o código-fonte nativo com o comando `prebuild`:

    ```node
    npx expo prebuild
    ```
    > Esse comando gera automaticamente o código seguindo alguns fatores, recomendo dar uma olhada no comando [prebuild](https://docs.expo.dev/workflow/prebuild/) pra ver melhor possíveis especificações, após finalizar serão geradas as pastas `android/` e `ios/` no seu ambiente de desenvolvimento.

3. Realize o build da aplicação com os comandos:
    
    ```node
    npx expo run:android
    // ou
    npx expo run:ios
    ```
    > Esse comando vai compilar e iniciar a sua aplicação no dispositivo conectado.

Obs: Após isso, caso tenha compilado e não iniciado seu aplicativo, você pode utilizar o comando `npx expo start --dev-client`, e vale informar também que esse é um processo fora do aplicativo Expo Go, então você não conseguirá utilizar dele nesse caso.

Essa foi apenas uma pequena introdução sobre a ferramenta até porque eu tinha esquecido dela e pesquisei para relembrar, você pode procurar ver mais sobre na documentação também: [Development builds](https://docs.expo.dev/develop/development-builds/introduction/)
Pocket Kotlin-C# Dictionary. C
Tags: kotlin, csharp
Published: 2023-09-26 19:26:55

## C

| Kotlin | C# |
| --- | --- |
| **catch**<br> Catches exception | **catch**<br> Catches exception |
| **class**<br> Class declaration | **class**<br> Class declaration |
| **companion object**, that is accessible without instantiating a class and **Companion**, its default name [Learn more](https://kotlinlang.org/docs/object-declarations.html#companion-objects) | Replacement for **static** properties and methods of a class. Differences are numerous! [Learn more](https://stackoverflow.com/questions/56514503/declare-static-property-in-kotlin) |
| **const**<br> Compile-time constant [Learn more](https://kotlinlang.org/docs/properties.html#compile-time-constants) | **const**<br> Compile-time constant [Learn more] (https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/language-specification/classes#154-constants) |
| **constructor**<br> Constructor. Can be omitted | C# constructor syntax doesn't use a designated keyword |
|**continue**<br> A statement to continue a loop [Learn more](https://kotlinlang.org/docs/returns.html#break-and-continue-labels) | **continue**<br> A statement to continue a loop. Unlike C#, Kotlin has **continue@myLabel** syntax to continue any level of nested loops. C# doesn't need it because it has **goto** statement! Hell yeah! [Learn more](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/statements/jump-statements) |
| **crossinline**<br> Modifier that indicates that lambda parameter of an inline function cannot use non-local returns | In C# there are no non-local returns (lambda cannot execute return from outer method, only from itself), so, technically every method is "crossinline" |
Procesar miles de registros con Spring-Batch
Tags: java, mysql, oracle, spring
Published: 2023-09-26 22:51:33

Pongamos como contexto, que se necesita **leer** desde una base de datos origen y **grabar** en otra base de datos distinta. Con el propósito de realizar resúmenes y cuadres diarios.

---

Lo más eficiente será no depender de algún ORM. Por lo que se recomienda emplear JDBC.

_Spring-Batch_ provee un _JdbcPagingItemReader_ el cual, al recuperar los registros de manera paginada no ocupará memoria en retener todo el resultado de la consulta. 

También tenemos un _JdbcBatchItemWriter_ para grabar los registros, que los grabarán usando la capacidad **batch** del _driver_.

{% embed https://gist.github.com/edgargs/32d91587b90a2fa1abf61de9e9375a2b %}

---

## Documentación

https://docs.spring.io/spring-batch/docs/current/reference/html/readersAndWriters.html#database

https://docs.spring.io/spring-batch/docs/current/reference/html/scalability.html#scalability
Modern Glassmorphism Contact Header
Tags: codepen, glassmorphism, ui, design
Published: 2023-09-26 22:43:11


![Finished Product](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piav1f3u8sfhkxgsd2iy.png)Check out this Pen I made!

{% codepen https://codepen.io/John-Davis-the-scripter/pen/XWoever %}
How to disable scrolling when menu is open?
Tags: svelte
Published: 2023-09-26 22:32:12

I have implemented a hamburger menu for mobile views on my website, and I want to prevent the background website content from being scrollable when the menu is open. The only relevant code I found was the following:

```
function toggleMenu() {
		menuOpen = !menuOpen;
	}

$: {
		if (typeof window !== 'undefined') {
			document.body.style.overflow = menuOpen ? 'hidden' : '';
		}
	}
```

Is there a more idiomatic way to achieve this in Svelte?
A glimpse into the future of React development
Tags: react, reactjsdevelopment, reactnative, typescript
Published: 2023-09-26 22:21:04

The React ecosystem is on the brink of a transformative evolution, and we invite you to be a part of it. **WebCrumbs** is not just a framework; it's a vision for the future of React development.

## WebCrumbs: The Vision
- **Seamless Integration**: Imagine a world where adding robust functionalities to your React apps is as straightforward as plugging in a component. No fuss, no lengthy setup.
- **Collaborative Ecosystem**: WebCrumbs aims to harness the collective genius of the React community, leading to a diverse and ever-evolving library of plugins.
- **Quality at the Forefront**: With community collaboration, each plugin will benefit from varied expertise, ensuring reliability and performance.
- **Empowering Developers**: Whether you're a newbie or a seasoned developer, WebCrumbs seeks to simplify your development process, allowing more time for innovation.

## But, We Need YOU!
WebCrumbs is in its nascent stages, and its success hinges on community collaboration.

- **Visionaries Welcome**: If you see the potential, help shape the project. Every idea, every line of code counts.
- **Early Adopters**: Dive into the [WebCrumbs Repo](https://github.com/webcrumbs-community/webcrumbs). Explore its budding capabilities and offer feedback. Your insights are invaluable.
- **Community Builders**: Engage in discussions, share the project, and invite others. The strength of WebCrumbs lies in its community.

React's future is exciting, and with **WebCrumbs**, it promises to be revolutionary. Join us in this ambitious endeavor to reshape React development for the better.
The best to know why we use MongoDB in 2023
Tags: mongodb, programming, database, webdev
Published: 2023-09-26 22:17:44

in this post i'll give you The best to know why we use MongoDB in 2023 :
click here => [**The best to know why we use MongoDB in 2023**](https://thebestcoding.com/the-best-reasons-to-choose-mongodb-in-2023/)
visit our Website => [**The Best Coding**](https://thebestcoding.com/)