teleren/devto huggingface dataset:
NoInfer in Typescript 5.4
Published: 2024-07-03 02:12:35

I introduce NoInfer which is new feature in TypeScript 5.4.

**What is NoInfer?**
NoInfer is a feature in TypeScript that suppresses type inference. For example, we have following the code. 

```typescript
const func1 = <T extends string>(array: T[], searchElement: T) => {
  return array.indexOf(searchElement);
};

console.log(func1(["a","b","c"],"d"))
```
The second argument of `func1` is assigned to `d`, but since `d` does not exist in the elements of the array in the first argument, an index search returns -1. However, TypeScript does not produce a type error in such a case. This is because both the array passed as the first argument and the string specified as the second argument are used as materials to infer the type T, resulting in the type T being inferred as 'a' | 'b' | 'c' | 'd'. So, how can you produce a type error if a string other than `a`, `b`, or `c` is entered as the second argument? This is where `NoInfer` can be used.

```typescript
const func2 = <T extends string>(array: T[], searchElement: NoInfer<T>) => {
  return array.indexOf(searchElement);
};
console.log(func2(["a","b","c"],"b"))// no error
console.log(func2(["a","b","c"],"d"))// error happened. Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'
```
Using `NoInfer` allows you to stop the type inference expansion at that part. Hence, In this case, the type T is constrained to 'a' | 'b' | 'c', so you can explicitly raise an error when passing 'd' as an argument.
Git and GitHub Explained Like You're Five
Tags: webdev, beginners, programming, tutorial
Published: 2024-07-03 02:06:00

Imagine that you have an application or a project folder. And you want to collaborate with other people on that project.

Or imagine that you have your application, and you uploaded some new code into your application. You added a new feature for example.

And now your application breaks.

Let's say your application is not running anymore like it was before.

And you are like "Hey. I would really love it if I could go back in the past in that code base in which my application was running."

"I wish there was some sort of way to you know take a picture of that codebase, and whenever I want that picture like that codebase as it was, during that time in the past, I could have that."

So, basically saving the history of your project.

Like, let's say, 1st July, your project looked like this. 2nd July, your project looked like this. 3rd July your project looked like this. Like some additional files, code changes etc.

You want to go back to what your project looked like on 1st July. You can do that.

You want to go back to what your project looked like on 2nd July, you can do that.

That is a use case that you can think of.

Another one can be, you are contributing to open source for example. Or, you and your friends are contributing to one project.

Now, imagine that, 100 people are contributing to just one folder. That is what happens to open source projects as well. There is one main folder, and so many people from around the world are contribute to that project.

Now, you might be wondering, "how do these people share their code?"

If you want to share a code in some open source project, you want to add your own functionality or share some changes you made, how can you do that?

We can do that through Git and GitHub. So Git and GitHub allows us to maintain this history of the project at what particular point of time, which person made which change, and where in the project.

Git helps us in doing that.

P.S. Get [my 2 Hour Web Developer](https://karlgusta.gumroad.com/l/eofdr) to learn how to think like a developer.
Greetings!
Tags: programming, python, learning
Published: 2024-07-03 01:37:56

Greetings all. I'm really excited to be here. I'm a new developer, working hard to build up my skills. I focus mostly on Python and SQL, but am also learning full-stack web development (HTML, CSS, and JS). I'm really excited to join this community. I'm always looking to learn and never pass up the opportunity get better. I'm always willing to collaborate and learn more, as I'm still a newbie at this, even though I've been working hard for the last year, I feel like I move one step forward and take two steps back. I'm hoping that I can work with others and collaborate and gain the knowledge and experience I need to be a good developer and then pass that knowledge on.
Razor Delivery Service
Tags: razordeliveryservice, razordelivery, razordeliverynewyorkcity
Published: 2024-07-03 01:37:34

Razor Delivery Service: 
The Prescription Delivery Solution!
Simplify your pharmacy’s prescription delivery process to improve operational efficiency, minimize patient burden & improve drug adherence.

Features: 

Delivery Service
We are on time. Always on time. we know the time importance. Faster than you can imagine. Experience fast service.

Effortless onboarding: Create recurring tasks with various rules as per your business needs.

Real-time data: Your drivers follow the assigned route by google maps and complete all deliveries on time.

Proof of delivery: Proof of Delivery is the receipt for the transportation of goods delivered. in-app collection of photos, signatures, barcodes and notes primary functions

Analyze and improve: Enhance your delivery services with end-to-end route planning, automated dispatch and real-time tracking

Contact:

Business Hours :

Monday-Friday: 10AM–6PM

Email Address :

support@razordelivery.com

Phone Number :

(917) 475-9222
Vault Secret as an External Secret
Published: 2024-07-03 00:34:11

This guide to help people who are new to Vault create a Kubernetes Secret through Vault


There are two ways to use Vault Secret:

- Adding the annotations
- Use External Secret Operator

![External Secret](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/259zhq379pxgbfqrxrok.png)*<small>Source: external-secrets.io</small>*

I used the second step in this article because I used ArgoCD before and wanted to visualize all the resources I created.

## Walkthrough



![Create Secret](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbo1k4r6v3n8a2fsgd46.png)


![Enable Secret Engine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dt3mxiostq9x6wsp2j8.png)


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

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





Create a Secret for the Vault token

```yaml
kubectl create secret generic vault-token --from-literal=token=<token>
```

or

```bash
echo -n "token" | base64
```

```yaml
apiVersion: v1
data:
  token: <Encoded Vault Token>
kind: Secret
metadata:
  name: vault-token
type: Opaque

```
Install External Secrets using Helm
```bash
helm repo add external-secrets <https://charts.external-secrets.io>
helm install external-secrets external-secrets/external-secrets
```
## SecretStore

![Note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dpu39w44mei9gya0guw.png)


Create secret-store.yaml file
```yaml
apiVersion: external-secrets.io/v1beta1
kind: SecretStore
metadata:
  name: secret-store
spec:
  provider:
    vault:
      server: http://<serverAddresss>:<port>
      path: <path> ----- see the picture above
      version: "<version>" ---- See the version near the path above
      auth:
        tokenSecretRef:
          name: vault-token
          key: token
```
## ExternalService

Create external-secret.yaml file
```yaml
apiVersion: external-secrets.io/v1beta1
kind: ExternalSecret
metadata:
  name: external-secret
spec:
  refreshInterval: 5m  ------ Time for fetching new values
  secretStoreRef:
    name: secret-store  ------- Secret Store Name 
    kind: SecretStore
  target:
    name: secret-to-be-created   --------- Secret Name
    creationPolicy: Owner
  dataFrom:
  - extract:
      key: "<key>"  ------- See the picture above
```
It will automatically get all values from Vault Secret and create a new secret if it does not exist.

## Preferences 
[HashiCorp Vault](https://external-secrets.io/latest/provider/hashicorp-vault/?source=post_page-----78173a0d9b5a--------------------------------)

---

English is not my first language, and I am not good at it, but I want to improve and enhance my English every day. Writing a blog is the best way I have chosen. Please let me know if there is anything confusing because of my English.
Data Fetching in Next.js 14: A Comprehensive Guide
Tags: react, nextjs, javascript, webdev
Published: 2024-07-03 00:27:48

Data fetching is a crucial aspect of building robust and dynamic applications. With the release of Next.js 14, developers have even more powerful tools at their disposal to fetch data efficiently and seamlessly. In this post, we will explore the various data fetching methods in Next.js 14, complete with examples and best practices.

## Introduction to Data Fetching in Next.js 14
Next.js 14 brings several enhancements and new features to improve the developer experience and application performance. Data fetching is one of the core areas where Next.js excels, offering different methods to suit various needs, including static site generation (SSG), server-side rendering (SSR), and client-side fetching.

**1. Static Site Generation (SSG) with getStaticProps**

SSG allows you to generate HTML at build time, which can be served to clients instantly. This method is ideal for pages with content that doesn't change frequently.

**Example**

```
// pages/blog/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}
```

 **2. Server-Side Rendering (SSR) with getServerSideProps**
SSR generates HTML on each request, making it perfect for dynamic content that changes often or requires authentication.
**Example**

```
// pages/profile.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user/profile');
  const profile = await res.json();
  return { props: { profile } };
}
```

**3. Incremental Static Regeneration (ISR)**
ISR allows you to update static content after the site has been built, ensuring your pages stay up-to-date without a full rebuild.

**Example**

```
// pages/products/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();
  return { props: { product }, revalidate: 60 };
}
```

 **4. Client-Side Fetching with SWR**
SWR (stale-while-revalidate) is a React hook library for client-side data fetching, ensuring your UI is always fast and reactive.
**Example**

```
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);
  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;
  return <div>Hello, {data.name}</div>;
}
```
**Conclusion**
Next.js 14 offers a variety of powerful data fetching methods to suit different needs, whether you're building a static site, a dynamic web application, or a combination of both. By leveraging these methods, you can ensure your application is fast, responsive, and up-to-date.

Happy coding!
Welcome Thread - v283
Tags: welcome
Published: 2024-07-03 00:00:00

---
published_at : 2024-07-03 00:00 +0000
---
![Flashing text that says Welcome!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0reb8zfegacsbla8wb64.gif)

---

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

3. Share your wins from this week in our weekly ["What was your win this week?](https://dev.to/t/weeklyretro) thread.
Best AI Tools - for June 2024 🎊
Tags: webdev, javascript, beginners, programming
Published: 2024-07-02 23:51:21

[Best AI tools for June - Substack](https://bestaitoolsforyou.substack.com/p/best-ai-tools-for-june-2024)

:) 

MAIN LIST: https://github.com/pink-mash-potato/awesome-ai-tools

#adhd #productivity #ai #neurospicy #aitools #genai
The HNG11 Internship program can significantly help me achieve my goals in several ways:
Published: 2024-07-02 23:50:44

Professional Objectives:

1. _Design Leadership_: HNG's team-based projects and collaborations can help me develop leadership skills and experience.
2. _Expertise Expansion_: HNG's diverse projects and mentorship can expose me to emerging design technologies and best practices.
3. _Cross-Functional Collaboration_: HNG's interdisciplinary teams and feedback sessions can enhance my collaboration skills with developers, product managers, and other stakeholders.
4. _Design Innovation_: HNG's project challenges and hackathons can provide opportunities for innovative design thinking and problem-solving.
5. _Design System Development_: HNG's emphasis on design systems and consistency can help me develop skills in creating and maintaining design systems.

Personal Objectives:

1. _Continuous Learning_: HNG's mentorship, workshops, and feedback sessions can support my continuous learning and skill development.
2. _Mentorship_: HNG's experienced mentors can provide guidance and support, helping me achieve my goals.
3. _Personal Projects_: HNG's flexible project structure can allow me to work on personal projects and receive feedback from peers and mentors.
4. _Networking_: HNG's community of designers, developers, and product managers can expand my professional network and connections.
5. _Wellness and Balance_: HNG's emphasis on work-life balance and self-care can help me prioritize your well-being and maintain a healthy lifestyle.

By actively participating in the HNG Internship program, I believe i can leverage these opportunities to achieve my goals and accelerate my growth as a designer.
Explorando el Ecosistema de JavaScript: Un Mapa Completo de Frameworks y Librerías
Tags: javascript
Published: 2024-07-02 23:21:41


![JavaScript Arbol](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t446fzhfkdeutcvtu3ix.png)

JavaScript ha evolucionado enormemente desde sus inicios, convirtiéndose en uno de los lenguajes de programación más versátiles y utilizados en el desarrollo web y móvil. Con una comunidad vibrante y en constante crecimiento, el ecosistema de JavaScript está lleno de frameworks y librerías que facilitan el desarrollo de aplicaciones de todo tipo.

He creado un mapa visual que detalla los frameworks y librerías más populares y útiles en el mundo de JavaScript. Este diagrama no solo enumera cada herramienta, sino que también proporciona una breve descripción de su propósito y la problemática que resuelve, junto con una indicación de su popularidad.

**Descubre las Herramientas Esenciales en el Ecosistema de JavaScript**:
El diagrama se organiza en varias secciones clave, cubriendo todas las áreas importantes del desarrollo con JavaScript:

**Frameworks de Frontend**: Herramientas como Angular, React y Vue.js que facilitan la creación de interfaces de usuario dinámicas y complejas.
**Librerías Utilitarias**: Incluyendo jQuery y Lodash, que simplifican tareas comunes en el desarrollo web, como la manipulación del DOM y el trabajo con datos.
**Herramientas de Construcción**: Webpack, Babel y otros bundlers que optimizan y preparan tu código para producción.
**Frameworks de Testing**: Como Jest y Mocha, que aseguran la calidad y confiabilidad del código mediante pruebas automatizadas.
**Frameworks de Aplicaciones Móviles**: React Native e Ionic, que permiten construir aplicaciones móviles nativas e híbridas con tecnologías web.
**Frameworks de Backend/Full-Stack**: Node.js, Express.js y otros, que traen la potencia de JavaScript al lado del servidor.

¿_Por Qué Este Mapa es Útil_?
Este diagrama es una excelente referencia tanto para desarrolladores novatos como para veteranos. Proporciona una visión clara y concisa de las herramientas disponibles en el ecosistema de JavaScript, facilitando la selección de la herramienta adecuada para cada proyecto. Ya sea que estés iniciando un nuevo proyecto o buscando mejorar uno existente, este mapa te ayudará a entender las opciones disponibles y tomar decisiones informadas.

Te invito a explorar este mapa y a compartir tus experiencias y opiniones sobre las diferentes herramientas. ¿Hay algún framework o librería que consideres esencial y que no esté en el diagrama? ¿Cuál ha sido tu experiencia con estas herramientas? ¡Comparte tus pensamientos en los comentarios!
Hello there, lets talk!
Tags: webdev, networking, beginners
Published: 2024-07-02 23:46:15

Hi there, I'm Carlos.
I'm an Angolan 21 year old computer science student who lives in Lisbon, Portugal. Lately I've been trying to build some connections and network, so I figured out it'd just be better to create an account over here. 
Right now I've been exploring Web Development and UX/UI and my goal is to share my adventure with whoever wants to read it. Every once in a while I will try to update this blog with some information on what's been happening in my journey, I hope you guys enjoy it.
If you'd like to share knowledge, feel free to connect with me in any way (I'm not sure about how this thing works so [here's my linkedIn](https://www.linkedin.com/in/carlos-van-dúnem/) .
Level up your Git security: Verified commits with Kleopatra!
Tags: git, security, github, programming
Published: 2024-07-02 23:25:59

I just finished securing my GitHub workflow by setting up verified commits using Kleopatra and followed this awesome guide: [YouTube Verified Commits on GitHub from Windows PC](https://www.youtube.com/watch?v=xj9OiJL56pM)

**Why verified commits?**
Having a green checkmark next to your commits on GitHub isn't just for show. It tells everyone that your changes are coming from a trusted source, adding an extra layer of security to your projects. This is especially important for open-source contributions or collaborative work.

**Kleopatra to the rescue!**
Kleopatra is a fantastic tool for managing GPG keys on Windows. The video walks you through the entire process, from installing GPG4Win (which includes Kleopatra) to generating your key and configuring it with GitHub.

**My experience:**
Overall, the process was smooth sailing. The guide provides clear instructions, and using Kleopatra made managing the keys a breeze. Now I can push my commits with confidence, knowing they're cryptographically signed and verifiable.

**Feeling secure?**
If you're looking to add some extra security to your GitHub workflow, I highly recommend checking out verified commits with Kleopatra. It's a worthwhile investment for any developer!

P.S.
Have any of you tried verified commits before? Let me know your thoughts in the comments!
List of top AI tools and products directories
Tags: ai, directories, javascript, programming
Published: 2024-07-02 23:13:40

I recently check lots of ai directories to find top ai tool for you.

:) 


- [Top Tools](https://www.toptools.ai/) - AI Tools Directory
- [Tool Pilot](https://www.toolpilot.ai) - Navigate the World of AI Tools
- [TopAI.tools](https://topai.tools/) - Discover the best AI tools Everyday
- [Top AI Tools Hub](https://www.topaitoolshub.com/) - 
- [Toolify.ai](https://www.toolify.ai/) - Best AI Companies and Tools, Auto Updated Daily By ChatGPT
- [There's An AI](https://theresanai.com) - No 1 AI Aggregator 
- [Stratup.ai](https://stratup.ai/) - AI-Powered Startup Ideas and Tools to Fuel Your Entrepreneurial Journey
- [Pugin](https://pugin.ai/) - Discover AI Plugins
- [Productivity Tools](https://productivity.directory) - A curated productivity directory
- [PoweredbyAI](https://poweredbyai.app) - AI TOOLS & PROMPTS!
- [OpenTools](https://opentools.ai/) - Chat with our GPT to find the right AI tool for you
- [OpenFuture AI](https://openfuture.ai/) - Largest Tools Directory, Fastest Update, The Most Accurate Database
- [Insidr AI Directory](https://www.insidr.ai/ai-tools/) - AI Tools Directory
- [Grabon AI Directory](https://www.grabon.in/indulge/ai-tools/) - The World's Best & Largest Directory Of AI Tools
- [FUTUREPEDIA](https://www.futurepedia.io/) - THE LARGEST AI TOOLS DIRECTORY, UPDATED DAILY
- [FutureTools](https://www.futuretools.io/) - Collects & Organizes All The Best AI Tools So YOU Too Can Become Superhuman!
- [Foundr/](https://foundr.ai/) - scover The Best AI Tools at Your Fingertips
- [Find my AI Tool](https://findmyaitool.com/) - Discover AI Tools for Your Business.
- [All Things AI](https://allthingsai.com/) - The Curated Resource of AI Tools 
- [AI Top Tools](https://aitoptools.com/) - The place to go for AI Tools 
- [AI Tools Marketer](https://aitoolsmarketer.com/) - Unlock the Power of AI: Discover, Learn, Compare, and Optimize with the Ultimate AI Tools Directory.
- [AI Tools List](https://aitoolslist.io/) - Best AI Tools Rated
- [AI Tools Guru](https://aitoolguru.com/) - THE LARGEST AI TOOLS DIRECTORY
- [AI Tools Directory](https://aitoolsdirectory.com/) - Curated list of AI tools
- [AI Tools Arena](https://aitoolsarena.com/) - Your Ultimate Resource for AI Tools and Insights
- [AI Scout](https://aiscout.net/) - AI Tools Directory
- [AI PEDIA HUB](https://aipediahub.com/) - THE LARGEST AI TOOLS DIRECTORY, UPDATED DAILY.
- [ainave](https://www.ainave.com) - Navigate the world of AI with ease!
- [AIDir.wiki](https://www.aidir.wiki/) - Discover the Latest AI Tools and Software to Take Your Business to the Next Level
- [Altern](https://altern.ai) - Find almost anything related to AI
Very First Post
Tags: blog, javascript, learning, beginners
Published: 2024-07-02 23:09:59

Well, here goes...

So I will openly admit I am unsure of what to even put in this very first blog of mine. I joined the FlatIron School Software Engineering online program and am trying to make radical changes in my life. I am looking forward to the program and getting into the IT workforce. I am not sure yet which avenue I will go down. I have family in different parts of the IT world. Cousins in cyber security, siblings in web design. I personally never thought I would be trying to learn to code. But, I also think I am capable of anything I truly set my mind to. My biggest enemy is myself and that is who I'm trying to change. This is something I am committed to and promised myself I would not let myself down. So wish me luck, I will try and post regularly to show progress of what  I have learned and see if I can even teach something myself. 

"Do not go gentle into that good night. Rage. RAGE against the dying of the light"    -Dylan Thomas 


Joe Bush
BITCOIN RECOVERY EXPERT
Tags: bitcoin, recovery, retriever, lostfunds
Published: 2024-07-02 22:59:06

OPTIMUM HACKERS RECOVERY IS THE BEST CRYPTO EXPERT TO RECOVER ALL YOUR LOST BTC AND HACKED BANK ACCOUNTS. RECOVER YOUR LOST ASSETS WITH OPTIMUM HACKERS RECOVERY

Hello everyone, I’d like to use this medium to express my gratitude to OPTIMUM HACKERS RECOVERY for assisting me in recovering my stolen crypto worth $821,550 through their hacking skills. I was skeptical, but it worked, and I got my money back. I’m so glad I discovered them  because I thought I’d never get my money back from those fake online investment websites. You can also reach them via.

Em:ail  support@optimumhackersrecovery.com
WHATSAPP: +1 321 313 1201
Website: https://optimumhackersrecovery.com
HACKED FUNDS FINALLY RECOVERED BY A BTC RECOVERY EXPERT// HIRE OPTIMUM HACKERS RECOVERY TO RECOVER YOUR LOST ASSETS
Tags: bitcoinrecovery, btcrecovery, recoveryexpert, bitcoinretriever
Published: 2024-07-02 22:56:01

OPTIMUM HACKERS RECOVERY IS THE BEST CRYPTO EXPERT TO RECOVER ALL YOUR LOST BTC AND HACKED BANK ACCOUNTS. RECOVER YOUR LOST ASSETS WITH OPTIMUM HACKERS RECOVERY

Hello everyone, I’d like to use this medium to express my gratitude to OPTIMUM HACKERS RECOVERY for assisting me in recovering my stolen crypto worth $821,550 through their hacking skills. I was skeptical, but it worked, and I got my money back. I’m so glad I discovered them  because I thought I’d never get my money back from those fake online investment websites. You can also reach them via.

Em:ail  support@optimumhackersrecovery.com
WHATSAPP: +1 321 313 1201
Website: https://optimumhackersrecovery.com