teleren/devto huggingface dataset:
Typescript Series - First and Last of Array Type
Tags: javascript, webdev, typescript, tutorial
Published: 2022-08-18 13:31:51

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

There are many ways of getting the first or last element of an array, let's explore some:

```
const arr = [1, 2, 3, 4, 5];

const first = arr[0];
const last = arr[arr.length - 1]

// or

const [first, ...rest] = arr;
const [...rest, last] = arr;

```

To create our Types we will use the array destructuring approach


## The Types

```
type First<Type extends unknown[]> = Type extends [infer R, ...unknown[]] ? R : never

type Last<Type extends unknown[]> = Type extends [...unknown[], infer R] ? R : never
```

For both of our desired types we are following the same  principle, so let's break one down.

### Understanding the infer keyword
The infer keyword can be used within a condition in a conditional type to put the inferred type into a variable. That inferred variable can then be used within the conditional branches.

`First<Type extends unknown[]>` basically, Type extends an array of unknown type, we we don't care about the type, we just want to get the first/last element.

`Type extends [infer R, ...unknown[]] ? R : never` next, we check if Type extends an array with more than one element while we _**infer**_ the type from the first/last destructured element and we also get the rest. Then, if the check passes we return the first/last element, otherwise we return never (ignored by TS).

Thank you!

you can find me here [My Twitter] (https://twitter.com/sarmunbustillo?t=pztqXmT7DH2pa9lDLjfrdQ&s=09)
How to uninstall MySQL Server from Ubuntu 22.04.
Tags: mysql, uninstallation, ubuntu, linux
Published: 2022-08-18 13:29:00

I am Kinyungu, an IT support specialist and loves to help people to have ease time understanding and using applications.Recently growing a career as a data engineer.

In this article, we look on how to uninstall MySQL server in Ubuntu 22.04. What may cause one to uninstall MySQL server? In case you face unexpected issues while using it or the MySQL server updates or even you willingly decide to uninstall it from your computer.

So follow along and see how we uninstall our MySQL server. Let us do it!!!

First step, we open our Ubuntu terminal, use the shortcut:
`CTRL` + `ALT` + `T`

Good now we are at our terminal, we will write the command to remove MySQL server:

```
sudo apt-get remove --purge mysql*
```
Lets explain this command:
`sudo` enables you to run with root privileges.
`apt-get remove`  this command only uninstalls a package from your machine but the package configuration file remains in your computer.
`--purge mysql*` It is passed as parameter to the `apt-get remove` command.


Next let's us remove the purge:

```
sudo apt-get purge mysql*
```
Lets understand this command, we know what `sudo` does.
`apt-get purge mysql*`, this command will delete all files and directories associated with MySQL.

At this point we have successfully uninstalled MySQL server from our Ubuntu 22.04.
However its advisable to run the following commands so that our MySQL server is uninstalled completely without leaving residue files.

```
sudo apt-get autoremove
```

```
sudo apt-get autoclean
```

Running the above commands leaves your system clean and you can continue to use your Ubuntu 22.04 well.

This should be considered optional and I would advise one to do this. After uninstalling applications or packages its good to update the system to be up to-date.

We will run this command:

```
sudo apt-get dist-upgrade
```
This command will update the repositories packages of applications in the system and also updates the kernel to a new version. It has an intelligent manner to handle dependencies of packages. This will involve to handle conflicts that arise due changes in dependencies or removing dependency packages no longer required. If required it installs new packages that will be required by the new kernel version in our system.


**Yeah!! **Indeed we did uninstall MySQL server.

I hope this article will help anyone uninstalling MySQL server from Ubuntu 22.04 and any other reader looking to learn.
Internet of things is the future!
Tags: iot, arduino, devjournal, beginners
Published: 2022-08-18 13:29:00

**What is IoT?**

The Internet of Things (IoT) is an arising worldview that empowers the correspondence between electronic gadgets and sensors through the web to work with our lives. IoT utilize smart gadgets and web to give inventive answers for different problems and issues connected with different business, administrative and public/confidential enterprises across the world. IoT is dynamically turning into a significant part of our life that can be detected wherever around us. In entire, IoT is an advancement that assembles broad assortment of savvy frameworks, structures and canny gadgets and sensors. Besides, it exploits quantum and nanotechnology as far as capacity, detecting and handling speed which were not possible in advance. Broad examination studies have been finished and accessible as far as logical articles, press reports both on web and as pieces of literature to outline the expected viability and appropriateness of IoT changes. It very well may be used as a preliminary work prior to making novel inventive field-tested strategies while thinking about the security, confirmation and interoperability.

Just learned about internet of things and i was excited to create a post on that. Utilizing IoT, I am currently working on a smart hydroponics setup using Aurduino UNO for this.
Implement Medium Like Bar Charts using Vue-chartjs
Tags: vue, chartjs, programming
Published: 2022-08-18 13:19:02

Wanna learn how to implement Medium-like bar charts using Vue-chartjs?

Analytics plays a key role in hydrating us with the latest or past data. Charts can be handy for analytical purposes. 

In this blog, we will discuss how to implement beautiful-interactive bar charts as shown by medium using vue.js.

Here's the list of items you will learn in this blog post.

1. Import and register the chart.js components
2. Render a basic chart with data
3. Get familiar with useful chart.js options
4. Customize chart using options
5. Combine multiple charts into a single Vue component
6. Customize charts

For full implementation, [navigate to canopas blog](https://blog.canopas.com/implement-medium-like-bar-charts-using-vue-chartjs-c8539b229376).
Best way to debug a React Application or Web Application?
Tags: react
Published: 2022-08-18 13:10:19

Hello, I've been trying to debug a React Application using just the console. However, what I'm trying to achieve is to put breakpoints like we do in Java, C++, C# and easily detect errors. 

I know that there are breakpoints in VSCode and you can step in and step out. However there are functions that gets stepped which you did not code, making it annoying to debug React Applications. 

Is there anyway to filter out this code and just step on your code to make it convenient?
Windows Run Commands
Published: 2022-08-18 13:05:03

Helpful run commands 

1. **%temp%** -- to retrive temporory data and clean it
2. **msconfig** -- configure your services
3. **msinfo32** -- get total information about yout device (software/hardware)
4. **dxdiag** -- info about device hardware
5. **dfrgui** -- fragment your drives
6. **cleanmgr** -- cleaning the storage 
7. **mrt**- microsoft - detect virus and malware using mrt
8. **services.msc**
9. **winver** -- view yout windows version
10. **prefetch**
11. **recent**-- see your recent files 
12. **regedit** -- edit the registry 
13. **temp** -- temporary files

[Tips and Tricks ](https://www.notion.so/Tips-and-Tricks-cf1dbe35aeb0462b81bb9bff3fe0a7b9)
Finally!! A Blockchain For Any Programming Language (Video)
Tags: blockchain, programming, web3, javascript
Published: 2022-08-18 12:51:53

I have exciting news for any developer who programs using a modern language like JavaScript, Python, C#, etc.

A new blockchain called [QANplatform](https://medium.com/r/?url=http%3A%2F%2Fqanplatform.com) allows you to design **Smart Contracts** using your existing skillset and programming environment. And even better, the blockchain automatically **pays you royalties** in crypto if your contracts are generic so that other applications can use them.

In this video, I discuss problems with Web3 and how the QANplatform will solve many of them. Whether you’re a technical or non-technical person, you must understand what’s coming, so you can take full advantage as a developer and a business.

{% embed https://youtu.be/bjtRfcenSWE %}

## Video Chapters
- [0:00](https://www.youtube.com/watch?v=bjtRfcenSWE&t=0s) Intro
- [0:39](https://www.youtube.com/watch?v=bjtRfcenSWE&t=39s) How I started with Web3 as a NodeJS Dev
- [1:41](https://www.youtube.com/watch?v=bjtRfcenSWE&t=101s) The problem with Web3 preventing Mass Adoption
- [11:44](https://www.youtube.com/watch?v=bjtRfcenSWE&t=704s) How can we fix Web3 for Mass Adoption
- [20:15](https://www.youtube.com/watch?v=bjtRfcenSWE&t=1215s) What is the QANplatform
- [23:55](https://www.youtube.com/watch?v=bjtRfcenSWE&t=1435s) Unique features that QANplatform offers
- [33:58](https://www.youtube.com/watch?v=bjtRfcenSWE&t=2038s) A message from John Jardin
- [34:31](https://www.youtube.com/watch?v=bjtRfcenSWE&t=2071s) How QANplatform benefits developers and businesses
- [51:11](https://www.youtube.com/watch?v=bjtRfcenSWE&t=3071s) Final Notes about the QANplatform

## Reference Links
- [QANplatform Website](https://www.qanplatform.com)
- [QANplatform Documentation](https://learn.qanplatform.com)
- [QANplatform Social Media](https://learn.qanplatform.com/community/social-media)
- [QANplatform Telegram Group](https://t.me/QANplatform)
- [QANplatform Discord Server](https://discord.com/invite/PYBxQsudTE)
- [IBM Quantum Computer Roadmap](https://research.ibm.com/blog/ibm-quantum-roadmap)
- [PKG NodeJS Compiler By Vercel](https://github.com/vercel/pkg)
- [rETH Faucet For Ropsten Ethereum Testnet](https://faucet.egorfine.com)
- [Web3 Simplified DAO](https://daodao.io/d/Web3Simplified)
- [Web3 Simplified YouTube Channel](https://youtube.com/web3simplified)
- [Bleeding Code YouTube Channel](https://youtube.com/bleedingcode)
Is Blockchain the best IT security for the Applications ?
Tags: blockchain, cybersecurity, itsecurity, applications
Published: 2022-08-18 12:41:00

Blockchain is one of the most forward  database technologies which helps in transaction of Cryptocurrency and it also helps in cybersecurity . Cybersecurity is a system which helps in protecting against threats. There are many ty[pes of IT security like application security , mobile security and many more . The main aim of Cybersecurity is to provide data protection.    Blockchain has amazing technology which helps in engaging application safety.  It provides an upper hand in IT security and also gives notable differences in cyber security . Blockchain are used in many forms  like in  Healthcare to keep patient records safely , It is also used in a currency form , and also it is used in voting to avoid election fraud. There are many advantages and disadvantages of blockchains . Blockchain is a very difficult interface. It needs experts who have the proper information about how blockchain actually works and how we can use it in an effective way . There are many types of Blockchain network like private network , public network and many more . Blockchain is very low accessible to outside parties but it is very secure and effective . In this article we will go through advantages and disadvantages of bitcoin and also how bitcoin helps in Cybersecurity in an effective way.
READ MORE : https://cyberexperts.com/is-blockchain-the-ultimate-cybersecurity-solution/
Environment variables in Nuxt 3
Tags: vue, nuxt, env, javascript
Published: 2022-08-18 12:40:51

To use environment variables in Nuxt 3, we need to use 

`runtimeConfig` in `nuxt.config`.

```
import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available within server-side
    apiSecret: "123",
    // Keys within public, will be also exposed to the client-side
    public: {
      apiBase: process.env.API_BASE || "default_api_url",
      otherUrl: process.env.OTHER_URL || "default_other_url"
    }
  }
});
```

So now if environment variables are present, their values will be stored in `apiBase` and `otherUrl`. If environment variables are not present, default values will be used for `apiBase` and `otherUrl`.

To access this within components/plugins/server routes use useRuntimeConfig().

```
<template>
  <div>
    API Base - {{ runtimeConfig.public.apiBase }} <br />
    Other URL -
    {{ runtimeConfig.public.otherUrl }} <br />
  </div>
</template>
<script lang="ts" setup>
const runtimeConfig = useRuntimeConfig();
</script>
```

Here is the codesandbox to see it in action,
{% embed https://codesandbox.io/embed/wispy-moon-y4l3hk?fontsize=14&hidenavigation=1&theme=dark %}

[Official Documentation](https://v3.nuxtjs.org/guide/features/runtime-config/)
Angular 9 Dev question(openshift in the mix)
Published: 2022-08-18 12:35:00

Howzit everyone,
Got this piece of code that runs well on when launching the angular application locally from VS Code.. however the live project is hosted on Openshift container environment.

`getBankerTeamType() {//debugger
    let teamType = this.teamType?.toString();
    if(typeof teamType !== 'undefined' && teamType){
      teamType = teamType?.charAt(0).toUpperCase() + 
     teamType?.slice(1);
      return teamType;
    }
    return;
  }`

So on the live environment I get this error:
_ERROR TypeError: Cannot read properties of undefined (reading 'toString')
    at e.getBankerTeamType_
Any idea what the issue might be?
Shift Left within API Security
Tags: api, security, blst
Published: 2022-08-18 12:16:31

###What is Shift Left?
Overall, shifting left is a proactive approach to security that can have many benefits for organizations. However, it is important to be aware of the challenges involved in shifting left in order to make sure that it is done effectively.
###The Benefits of Shift Left
Another benefit of shift left is earlier detection and prevention of security vulnerabilities. In traditional waterfall development, security testing is often done near the end of the process, after the code has been completed. By that time, it may be too late to address any vulnerabilities that are found. In a shift left model, on the other hand, security testing is done continuously throughout the development process. This allows for earlier detection of potential vulnerabilities, which can then be addressed before they cause any harm.
Finally, shift left models are more efficient and effective use of resources. In traditional waterfall development, security testing is often done by a separate team of specialists who are not familiar with the codebase. This can lead to wasted effort and duplication of effort, as well as a lack of understanding of how the code works. In a shift left model, on the other hand, security testing is integrated into the development process and performed by the same team that writes the code. This results in a better understanding of how the code works and how to secure it, as well as more efficient use of resources.
###How to Implement Shift Left
The next step is to integrate security testing into the development process. This means that developers should test for vulnerabilities early and often, and that they should fix any issues that are found before they reach production. By integrating security testing into the development process, organizations can find and fix vulnerabilities before they cause problems in production.
Finally, it's important to monitor APIs in production for potential threats. This includes monitoring for suspicious activity, such as unusual traffic patterns or unauthorized access attempts. By monitoring APIs in production, organizations can quickly identify and respond to potential threats.
Shifting left within API security requires a collaborative effort between development and operations teams. By working together to establish and enforce security policies, integrate security testing into the development process, and monitor APIs in production, organizations can ensure that security is a priority throughout the entire lifecycle of their API.


In Conclusion Shifting left within API security is a great way to stay ahead of the game and keep your APIs secure. By doing so, you can avoid costly security breaches and keep your data safe.

Star our [Github repo](https://bit.ly/3QFgAUf) and join the discussion in our [Discord channel](https://bit.ly/3HQtlYo) to help us improve BLST!
Test your API for free now at [BLST](https://www.blstsecurity.com/?promo=blst&domain=https://dev.to/Shift_Left_within_API_Security)!
Audio Player for WooCommerce
Tags: woocommerce, audio, player, plugin
Published: 2022-08-18 12:07:00

Play and sell audio files with [music player for WooCommerce](https://woocommerce.com/products/audio-player-for-woocommerce/). It allows you to sell individual audio files or bundles with user friendly interface.

Key Features of Audio player plugin is:

1. Creates a music marketplace
2. Engages users with audio streaming
3. Stores can offer audio files for sale and download
4. Admins can add a customized audio player to your store
5. You can modify the audio player’s theme, bar, and buttons
6. Admins can create playlists when they upload multiple audio files
7. Admins can customize file names, thumbnails, and popup button texts
8. Supports multiple audio file formats

For More Information:
https://woocommerce.com/products/audio-player-for-woocommerce/
Property 'name' comes from an index signature, so it must be accessed with ['name'].
Tags: beginners, javascript, angular, webdev
Published: 2022-08-18 12:05:12

categories-form.component.html
```
<div class="admin-page">
	<p-card header="Ajouter Catégories" subheader="Ajouter ou Modifier les catégories ici">
		<div class="p-grid" [ngStyle]="{ 'margin-bottom': '25px' }">
			<div class="col-12">
				<p-toolbar>
					<div class="p-toolbar-group-left"></div>
					<div class="p-toolbar-group-right">
						<p-button styleClass="p-button-primary" [ngStyle]="{ 'margin-right': '12px' }" label="Créer" icon="pi pi-plus" (click)="onSubmit()">
						</p-button>
						<p-button styleClass="p-button-secondary" label="Annuler" icon="pi pi-arrow-circle-left" routerLink="form"> </p-button>
					</div>
				</p-toolbar>
			</div>
		</div>
		<div class="p-grid">
			<div class="col-12">
				<form [formGroup]="form">
					<div class="formgrid grid">
						<div class="field col">
							<label for="name">Nom</label>
							<input
								formControlName="name"
								id="name"
								type="text"
								class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full"
							/>
							<small class="p-error" *ngIf="categoryForm.name.invalid && isSubmitted">Nom requise</small>
						</div>
						<div class="field col">
							<label for="icon">Icone</label>
							<input
								formControlName="icon"
								id="icon"
								type="text"
								class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full"
							/>
							<small class="p-error" *ngIf="categoryForm.icon.invalid && isSubmitted">Icone requise</small>
						</div>
					</div>
				</form>
			</div>
		</div>
	</p-card>
</div>

```

categories-form.component.ts

```
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CategoriesService, Category } from '@kartel/products';

@Component({
    selector: 'kartel-categories-form',
    templateUrl: './categories-form.component.html',
    styles: []
})
export class CategoriesFormComponent implements OnInit {
    form: FormGroup;

    isSubmitted: boolean = false;

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit(): void {
        this.form = this.formBuilder.group({
            name: ['', Validators.required],
            icon: ['', Validators.required]
        });
    }

    onSubmit() {
        this.isSubmitted = true;
        if (this.form.invalid) {
            return;
        }
        console.log(this.form.controls.name.value);
        console.log(this.form.controls.icon.value);
    }
    get categoryForm() {
        return this.form.controls;
    }
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6kxili4g64drs1uvsv1.png)
Facebook Messenger Chatbot for WooCommerce
Tags: woocommerce, chatbot, plugin
Published: 2022-08-18 12:03:54

[Woocommerce Chatbot plugin](https://woocommerce.com/products/facebook-messenger-chatbot-for-woocommerce/) engages customers with predefined queries and options to suggest the best possible post back replies.

Some Key Features of WooCommerce chatbot plugin is

1. Automates customer support with Chat.
2. Chat replies in text, URLs, or postback form.
3. Set up to three postback replies (Facebook allows three).
4. Send images in initial chat messages.
5. Write default Chatbot messages with titles.
6. Create conditional questions as auto-replies.
7. Enable product, category, or post search in Chat.
8. Show Chat bubble on shop, home, or single-product pages.
9. Connect your Facebook business page.
10. Change the connected Facebook page when needed.

For More Information: https://woocommerce.com/products/facebook-messenger-chatbot-for-woocommerce/
Biometric Login for WooCommerce
Tags: woocommerce, biometric, login, plugin
Published: 2022-08-18 11:56:56

[WooCommerce Biometric Login](https://woocommerce.com/products/biometric-login-for-woocommerce/) helps you prevent phishing attacks and adds another layer of security to your valuable data.

Key Features of Biometric login are:

1. Add biometric login capability to simplify your UX
2. Biometric login backed by WebAuthn Technology
3. Display it before or after the WooCommerce login
4. Customize biometric button text and description
5. Authenticate biometric identity by password
6. Restrict by user roles
7. Display registration history to users
8. Users can add new or delete previous registrations

For more information: https://woocommerce.com/products/biometric-login-for-woocommerce/
Hiring Developer Advocate!
Tags: hiring, opensource, authentication
Published: 2022-08-18 11:42:00

[SuperTokens](https://supertokens.com/) is building open source authentication (as an alternative to Auth0, Firebase and AWS Cognito). We enable startups to launch quicker and focus on their core product offering. SuperTokens is being used by hundreds of developers across the globe.

Please apply [here](https://angel.co/l/2wamXW) or reach out to prathvi@supertokens.com if you'd like to apply.
Cart Discounts for WooCommerce
Tags: woocommerce, cart, discounts, plugins
Published: 2022-08-18 11:40:03

Increase store conversions and reduce cart abandonments with the [WooCommerce discounts plugin](https://woocommerce.com/products/cart-discounts-for-woocommerce/).

Key Features of Cart discount for WooCommerce is:

1. Offer conditional cart discounts
2. Base conditions on:
   Total cart amounts
   Cart quantities
   Total products
   Cart abandonment
   Cart weights
3. Selected products or categories
4. Manage multiple rules to oversee discounts
5. Automate cart discounts with schedules
6. Fixed or percentage-based discounts
7. Offer cart discounts to specific users
8. Personalize rules and congratulations pop-ups
9. Enable abandoned cart emails
10. Add discount widgets

For More Information: https://woocommerce.com/products/cart-discounts-for-woocommerce/