teleren/devto huggingface dataset:
Help on Angular v17 and retrieve data
Published: 2024-01-01 18:49:46

hi, anybody for help me resolve my bug in Angular v.17 please?
I want to retrieve data from my Observable. It has an undefined default value in the console which means that the list of my products on my db json-server (db.json) which is operational does not appear in the View. The code compiles without error How to do it? THANKS

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3te66tln5isxqcag8le2.png)
best regards
Christophe
Explore React Navigation: A Guide to React Router
Tags: webdev, react, learning, frontend
Published: 2024-01-01 18:48:58

Why should you use React Router?
Check it out!

First, let's understand some terminology...

Routes: These are defined paths (URLs) that lead us to the components of your app, such as "/home," "/about," and "/login."

Router: It helps in matching the requested URL with the defined routes and renders the appropriate contents of the web page.

React Router helps users navigate through different pages of the web without reloading the entire page.

Your app is like home, components are your rooms, and React Router is like a map of your house, helping you navigate your house without moving you out of it.

React Router has two special components for navigation.

1. Link: The `Link` component is a basic navigation component that creates a hyperlink to navigate to a specific route.
2. NavLink: It is an extension of `Link` that provides a special feature called "active," allowing us to check whether the page is active or not using the `isActive` prop. You can style it accordingly.

For example, isActive will check if you are on the "/about” page. If you are on that page, it will turn orange; otherwise, it will change to gray.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otjdq08ddu3g7t58zu6.png)
Buy verified Paxful Account
Tags: webdev, beginners, tutorial, programming
Published: 2024-01-01 18:41:30

Buy verified Paxful Account

➤E-mail: universalseosmm
@gmail.com
➤WhatsApp: +1 315-355-7986
➤Telegram: Universalseosmm
➤Skype: universalseosmm

https://universalseosmm.com/product/buy-verified-paxful-account/
Task-5
Published: 2024-01-01 18:36:54

[Q.No-1]


https://docs.google.com/spreadsheets/d/1T6J075Uh6-aYghuSg0BRSKIxVGWhkYasTDiFiIOaRms/edit?usp=sharing



[Q.No-2]
Key Points of Test scenario, Test case, Test strategy and plan, Test summary report.

1) Test scenario:-
 
* Document which contains what are all the functionalities that needs to be tested.
* Here the tester test the login functionality, signup functionality, payment, checkout.
* Easy to understand and execute the functionality.

2) Test case;:-

* Test case ID.
* Test case design techniques.
* Test data.
* Test steps.
* Test case developments.
* Test Result.

3) Test strategy:-

* It is a high level document which contains the over all approach for an entire testing process.
* This will be prepared by test lead and manager.
* It varies from org to org but inside org it is same for all the projects.

4) Test plan:-

*It is high level documents which contains all the planning activities of entire testing process.
* It will be prepared by test lead and manager.
* It contains scope, objectives, features to be tested, cost and time estimation, risk and mitigation, staffing and training.

5) Test summary report:-

* How many test case return?
* How many passed?
* How many failed?
* How defects were reports?
error deploying a tsx with deno deploy
Tags: deno
Published: 2024-01-01 18:17:06

HELP

I want to deploy a deno tsx (also using python) with dash.deno.com and recieved this message:

Failed to deploy:

UNCAUGHT_EXCEPTION

Error: Cannot load dynamic library because --unstable flag was not set
    at https://deno.land/x/python@0.4.3/src/ffi.ts:46:13

This is the jsonc:

{
  "tasks": {
    "start": "deno run --allow-net=:8000 --unstable --allow-ffi --allow-env  server.tsx"
  }
}

So --unstable is set !

I don't understand the error.


Thank's for helping :)


—
Navigating the Digital Frontier: A Software Engineer's Journey
Tags: webdev, career, devjournal, javascript
Published: 2024-01-01 17:44:52

Greetings, fellow tech enthusiasts! I'm thrilled to welcome you to my corner of the digital world. My name is Shavaughan, and I'm a software engineer/web specialist with six years of hands-on experience in crafting digital platforms. 

In this blog, I will share details about who I am and future content I will be posting in the future:

## About Me:
Throughout my life, I’ve been always enthusiastic about technology working on the computer using software from making websites with Dreamweaver to creating images with Photoshop. In 2016, I started building websites using HTML and CSS along with using CMS platforms such as WordPress. Since then I’ve been honing my technical skills with MERN stack building modern, user-friendly web application platforms, and creating innovative solutions that push the boundaries of what's possible. 

## What to Expect In the Future:
On this blog, I'll be sharing my journey of building projects from start to finish. Expect deep dives into design patterns, discussions about overcoming challenges, unraveling the mysteries behind bugs, and demystifying how code works. I believe in transparency and sharing the full spectrum of the development process, from ideation to deployment.

## Join Me on the Journey:
Whether you're a fellow developer seeking insights, a business owner looking to enhance your online presence, or simply a curious mind interested in the world of web development, I invite you to join me on this journey. Together, we'll explore the intricacies of the MERN stack, unravel the magic behind user-friendly digital platforms, and dive into the ever-exciting realm of software engineering.


![Laptop with logo on the screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqf37vbtpn6a7yccdiy9.png) 
[Check out my portfolio website to see my projects!](https://shavaughanw.com/)
NestJS tip: how to inject the native logger as any other provider
Tags: node, nestjs
Published: 2024-01-01 17:37:38

> for NestJS v8, v9 and v10

# Why?

The `Logger` class from `@nestjs/common` is not a built-in provider. So we **can't** do this:

```ts
import { Module, Logger } from '@nestjs/common'

@Module({})
export class AppModule {
  constructor(private readonly logger: Logger) {}

  onModuleInit() {
    this.logger.debug('hi')
  }
}
```

So we should initialize that class by ourselves. This is good because we can define the context that the logger will have:

```ts
// ...
export class AppModule {
  private readonly logger = new Logger(AppModule.name)

  onModuleInit() {
    this.logger.debug('hi')
  }
}
```

but this is bad because we are not relying on DI (Dependency Injection) as we do for others native classes in our NestJS app, which looks a bit hacky. Also, if we want to ignore or change the behavior of that logger in some test suite, it would be harder than simply using the [auto mocking feature](https://docs.nestjs.com/fundamentals/testing#auto-mocking) from `@nestjs/testing` or using any other idiomatic approach.

# What?

Now we can inject the `Logger` class as any other provider, like this:

```ts
import { Module, Logger, Scope, Inject } from '@nestjs/common'
import { INQUIRER } from '@nestjs/core'

@Module({
  providers: [
    {// Register this provider in the module that you want to inject the logger
      provide: Logger,
      scope: Scope.TRANSIENT,
      inject: [INQUIRER],
      useFactory: (parentClass: object) => new Logger(parentClass.constructor.name),
    }
  ],
})
export class AppModule {
  @Inject()
  private readonly logger: Logger

  // or via constructor-based injection
  //constructor(private readonly logger: Logger) {}

  onModuleInit() {
    this.logger.debug('hi')
  }
}
```

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


# How?

In order to make that possible, we will have a new [factory provider](https://docs.nestjs.com/fundamentals/custom-providers#factory-providers-usefactory) using the [transient scope](https://docs.nestjs.com/fundamentals/injection-scopes#provider-scope) and the [`INQUIRER`](https://docs.nestjs.com/fundamentals/injection-scopes#inquirer-provider) native provider.

As per the docs:

> Transient providers are not shared across consumers. Each consumer that injects a transient provider will receive a new, dedicated instance.

It means a new instance of the `Logger` class will be created every time they are injected somewhere, instead of being a singleton as usual. This is good because we can then inject the `INQUIRER` provider (from `@nestjs/core`) into that factory provider.

The value of `INQUIRER` provider will be the class where a provider was constructed. So we can use that value to define the logger context (ie., the first argument on `new Logger` constructor).

And that's how we can move the initialization of the `Logger` class to the module definition instead of having them polluting our providers.
AutoGen + LangChian + SQLite + Function Schema = Super AI Chabot
Tags: database, ai, machinelearning, deeplearning
Published: 2024-01-01 17:09:23

Over the past year, I have built many AI chatbots most of them built on Autogen and Langchain.

so in this Post, I am going to be teaching you everything that I know about building a Super AI chatbot using Autogen, langchain, Sqlite and Function Schema so that you can have the same sort of success as AI engineering by utilising this amazing new technology.

you will be able to copy and paste my code and get started with building these Super Ai Chatbots for your business and your personal use as quickly as possible

but the best part about what I’m about to show you is that this method is going to give you complete flexibility and customization over how your app works and how the SQLite and function schema are processed.

the full article can be found [here](https://quickaitutorial.com/autogen-langchian-sqlite-function-schema-super-ai-chabot/)
Clean Code e suas problemáticas
Tags: qualidade, cleancode
Published: 2024-01-01 17:09:14

ou adepto ao clean code mas ainda continua sendo um processo muito doloroso quando é medido na grandeza de tempo de entrega x qualidade de código.

## Tempo de entrega

Em grandes projetos onde o prazo é curto,é uma triste realidade onde a qualidade de código fica como débito técnico, muitas empresas tentam implementar processos de qualidade e nem estou falando de QA(Quality Assurance), estou falando de processos como Sonarqube, testes unitários, testes E2E, testes automatizados, testes de carga e afins.


## Qualidade de código

Felizmente pude participar de projetos que se preocupavam com os pontos que citei acima, mas como nem tudo é as mil maravilhas, com grandes responsabilidades vem a burocracia. 
Toda feature nova que teríamos que subir passava por uma enorme esteira até chegar no cliente no final, era demorado mas essa burocracia garantia uma qualidade maior e menos bugs.
Unreal Engine
Tags: unrealengine, beginners
Published: 2024-01-01 17:02:28

The Unreal Engine is a series of of game engines developed by Epic Games. The Unreal Engine is written in C++ and was initially designed for the creation of first-person shooters, including its first game Unreal released in 1998. Unreal has since added support for other genres including top-down and third-person --both of which have premade templates available on the platform. The Unreal Engine has also expanded into other industries such as film.


Unreal Engine, as of the time I'm writing this, is on its fifth iteration. Unreal Engine 5 is a source-available engine with a royalty model. Projects developed using the Unreal Engine that reach over 1 million USD in revenue will be charged 5% by Epic Games, but the engine is free to use up until that point.

Unreal Engine is designed with beginner friendliness in mind. Coding for the engine can be done in raw C++ with the use of a compiler or you can use the built in Blueprint Visual Scripting system. Blueprint uses a table of node based interfaces to represent lines of code and is designed to be very simple to understand and learn. Below is an example from the Unreal Engine 5 Blueprint tutorial that shows how to create a spring board that launches characters when come into contact with them.

![Unreal Engine Blueprint Tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4i4e0j1wprrqly95b4e.jpg)

Unreal Engine also has other user friendly interfaces such as the menus used for adding and modifying 3D models. Models can be added to the game environment directly from the toolbar and its mesh material and physics can all be accessed and changed from with in the same menu.

Unreal Engine also has a large community of developers meaning a it has a many resources on how to pick it up and start learning. With all these user friendly features and resources it is easy to see why it so popular and it definitely helps that doesn't cost anything to start out. So if you are looking to try your hand at 3D game development, maybe give Unreal a shot.
CREATE REACT APP WITH VITE 2024
Tags: webdev, javascript, react, vite
Published: 2024-01-01 16:55:49

Creating a React app with **Vite** is a straightforward process that offers fast development and optimized builds compared to creating React app through **CRA** command. 

**Vite** is a build tool that focuses on speed and efficiency, making it an excellent choice for React developers. Here's a step-by-step guide to creating a React app with Vite:

**Step 1**: Install _Node.js_ and _npm_:
Ensure you have _Node.js_ and _npm_ (Node Package Manager) installed on your machine. You can download them from _https://nodejs.org/._

**Step 2**: Install _Vite_ Globally:
Open a terminal and install _Vite_ globally using the following command:

`npm install -g create-vite
`
**Step 3**: Create a new React app:
Create a new React app using _Vite_ by running the following command in your terminal:
 
`npm create vite@latest app-name -- --template react`
 
**Step 4**:Run `npm install` to add missing dependencies 

**Step 5**: In terminal navigate to the project directory

`cd app-name`

**Step 6**: Start the development server:
Run the following command to start the development server:

`npm run dev`

This will launch your React app in development mode. By default, it will be available at http://localhost:3000/.

**Step 7**: Explore the project structure:
_Vite_ generates a project structure that is minimal and efficient. Key directories and files include:

**src**: Contains your React components and application logic.
**public**: Houses static assets that should be publicly accessible.
index.html: The main HTML file for your app.
**main.js** or **main.jsx**: The entry point for your application.


**Step 8**: Build the production version:
When you're ready to deploy your app, build the production version by running:

`npm run build`
 
This will create an optimized build in the dist directory.
What are your goals for week 1 of 2024?
Tags: discuss, goals, motivation
Published: 2024-01-01 16:36:48

It's week 1 of 52 for 2024. Are you ready for it?

## What are your goals for this week and year? 

- What are you building? 
- What will be a good result by week's end?
- What events are happening any week? 
  * in person or virtual?
- Any special goals for the year?

The schools are still out here. Just the way the holidays fell it's kind of odd students are off till next Monday. So it's lunch with the kid every day.

### Last Week's Goals
 
- [:white_check_mark:] Job Search. 
   * Applied to a couple jobs.
- [:white_check_mark:] CSS Sweater build and blog.
- [:x:] Run a weekly Slack thread similar to this post. Took a break for Christmas
- [:white_check_mark:]  Build LEGO which led to CSS blog. 
- [:white_check_mark:]  Finish the pictures from the end of October. Finished this!

### This Week's Goals


- Continue Job Search. 
   * I'll network do some light search.
- Project work
- Events
  * Thursday Virtual Coffee (VC).
  * I don't know of anything this week. 
- Run a weekly VC Slack thread similar to this post. at VC we're running a New Goals challenge for the month. I'll work with the team to modify the thread. 
- Build LEGO set I got for Christmas. 


###Feedback on changes 

Wondering if with new year should I modify this series a little. Thoughts on doing any of the following.

- Make a new header for this series.
- Start a new series for 2024. Just change the name to week X of 2024?
- Use other tags. 


### Your Goals for the week and 2024

Your turn what do you plan to do this week? 

- What are you building? 
- What will be a good result by week's end?
- What events are happening any week? 
  * in person or virtual?
- Any special goals for the year?


```html
-$JarvisScript git push
```
Contemporary House 01 Sample Loops Download
Tags: audioloops, music, musicproduction, musicales
Published: 2024-01-01 16:32:06

Introducing "**[Contemporary House 01](https://audioloops.com/product/contemporary-house-01/)**" – Where Modern Elegance Meets Timeless Comfort!

Step into a world of sophisticated design and unparalleled comfort with our Contemporary House 01. This architectural masterpiece seamlessly blends contemporary aesthetics with functional living spaces, creating an environment that elevates your lifestyle to new heights.

Key Features:

Sleek Design: The exterior of Contemporary House 01 boasts clean lines and a minimalist facade, making a bold statement in modern architecture. The thoughtfully designed exterior sets the tone for the chic interiors within.

Open Concept Living: Experience the beauty of open-concept living, where spaces flow seamlessly from one to the next. The spacious living areas are flooded with natural light, creating an inviting and airy atmosphere for both relaxation and entertainment.

Luxurious Finishes: Immerse yourself in luxury with high-end finishes throughout the house. From premium hardwood floors to sleek, state-of-the-art fixtures, every detail is carefully curated to reflect the epitome of contemporary elegance.

Smart Home Integration: Stay connected and in control with the latest in smart home technology. Control lighting, climate, and security systems with the touch of a button, providing convenience and peace of mind for the modern homeowner.

Gourmet Kitchen: The heart of Contemporary House 01 is its gourmet kitchen. Equipped with top-of-the-line appliances and ample counter space, this kitchen is a chef's dream, perfect for preparing culinary delights and hosting memorable gatherings.

Spa-like Bathrooms: Retreat to the luxurious spa-like bathrooms featuring sleek fixtures, premium tiles, and indulgent soaking tubs. Unwind and rejuvenate in an oasis of tranquility.

Impressive Outdoor Spaces: Extend your living space to the outdoors with carefully landscaped gardens and a thoughtfully designed patio. Whether you're entertaining guests or enjoying a quiet evening, the outdoor areas of Contemporary House 01 provide the perfect backdrop.

Energy Efficiency: Embrace a sustainable lifestyle with energy-efficient features incorporated into the design. From energy-efficient appliances to eco-friendly building materials, Contemporary House 01 is designed with both style and environmental consciousness in mind.

**[Contemporary House 01](https://audioloops.com/product/contemporary-house-01/)** redefines modern living, offering a harmonious blend of aesthetics and functionality. Elevate your lifestyle and make a statement with this exceptional residence – where every detail is a testament to the art of contemporary living.
Exemple de projet réalisé en django
Tags: django, html, tailwindcss, python
Published: 2024-01-01 16:23:44

Salut à tous. Grâce à du python, j'ai réaliser une application web capable de générer automatiquement des tâches en fonction de la date de départ, la date de fin et des agents.
Veuillez cliquer sur le lien pour découvrir d'avantage :
{% embed https://youtu.be/j5W76WM4xeE %}

🤞🤞 Abonne-toi à ma chaîne pour plus d'astuce. 🤞🤞
CONFIGURE VPN TO ACCESS INSTANCES IN THE PRIVATE NETWORK
Tags: aws, ec2, vpc, vpn
Published: 2024-01-01 15:57:55

## Launching EC2 and installing OpenVPN
1. Launch an EC2 instance(public) in a VPC to setup openVPN(Ubuntu is taken in this lab)
2. Connect to the EC2 instance through SSH then update and upgrade the instance using:
  `sudo apt update
   sudo apt upgrade`
3. Install openVPN server in the public subnet and run the OpenVPN installer wizard using following commands:
`wget https://git.io/vpn -O openvpn-ubuntu-install.sh
chmod -v +x openvpn-ubuntu-install.sh
sudo ./openvpn-ubuntu-install.sh`
4. In the wizard, provide choices as shown in fig. Then, provide a client name![Installation Wizard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10ki752aby5kvvtboizt.png)
5. Check the status of openVPN server:
`sudo systemctl status openvpn-server@server.service`
If a restart is needed:
`sudo systemctl restart openvpn-server@server.service`
![OpenVPN service status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/manyz9phnrwbj0x248ra.png)
6. Download the .ovpn file to local pc. It is required to connect through openVPN desktop client. The name of the .ovpn file depends on the name of the client provided during the previous wizard installation.
`ssh -i "your-key.pem" ubuntu@<public ip address> "sudo -S cat /home/ubuntu/client_name.ovpn" > client_name.ovpn`
The directory for the .ovpn file could differ : /root/![openVPN profile download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzm7h0sjm0buoxkddqdz.png)

### Configuring Security groups
The default port 1194 was selected in the wizard previously. So, the inbound rules should include Custom UDP for port 1194.
![Inbound Rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/papbabts2p2qjfvy5bfs.png)

## Downloading OpenVPN Connect and establishing the connection
1. Go to https://openvpn.net/client-connect-vpn-for-windows/ (Windows)
2. After the installation is completed, run the application and import the .ovpn file.
![IOpenVPN Client Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rolj3evsn7hmbw5fyri.png)
3. The imported profile details is shown.
![VPN Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwsm340cg7fgcghavfkp.png)
4. If all the configurations are proper, the connection will be successful.
![OpenVPN connectuion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awdmpl1x74vw0i36lawd.png)

## Verifying the connection to the instance in private subnet
1. Once the openVPN connection is successful, we can verify whether the instances in the private subnet can be connected to or not.
2. Launch an instance in a private subnet for the same VPC as of the instance in the public subnet.
![EC2 console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7r1bog94dfs86l7r44c.png)
3. Take the private IPv4 address and PEM file and connect through SSH
`ssh -i "<pem-file>" ubuntu@<private-ip>`
![EC2 ssh connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0zgt051v8tozky5xndu.png)