teleren/devto huggingface dataset:
Extending generic collection classes in Typescript
Published: 2022-10-02 14:27:34

I'm researching some Typescript that won't compile, so I'm going to layout the problem here and I'll post the answer alter if/when I find it. (**Answer Below**!)

I have a base Generic which can accept strings, numbers, booleans, strings[] and numbers[]

```
export default class ParameterValue<
  T extends string | number | boolean | string[] | number[]
> {
  _val: T

  private setValue(newValue: T) {
    this._val = newValue
  }
}
```

I want to extend this to work with arrays specifically.

```
export default class ArrayParameterValue<
  T extends string | number
> extends ParameterValue<T[]> {

  private addValue(newValue: T) {
    if (!this._val.contains(newValue)) {
      this._val.push(newValue);
    }
  }
}
```

But I'm getting the following Typescript Error:

```
Type 'T[]' does not satisfy the constraint 'string | number | boolean | string[] | number[]'.
  Type 'T[]' is not assignable to type 'string[]'.
    Type 'T' is not assignable to type 'string'.
      Type 'string | number' is not assignable to type 'string'.
        Type 'number' is not assignable to type 'string'.ts(2344)
```

## The Answer

I think the answer is that BaseParameter must accept type Array<string | number>.

string[] and number[] can't either on their own accept ```string | number```, so there's an error.

In fact I was able to make my code a bit tighter because I could remove string[] and number[] as types and replace them with  

``` T extends string | number | boolean | Array<string | number>```
Using Material UI in React Project
Published: 2022-10-02 14:23:36

**What is Material UI? **
Material-UI is simply a library that allows us to import and use different components to create a user interface in our React applications. This saves a significant amount of time since the developers do not need to write everything from scratch


## To install Matrial UI 

```
npm install @mui/material @emotion/react @emotion/styled
```
with the icon pack to use the icons in project as a tag 

```
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
```

**Navbar**

- to create a navbar, we can use mui tag <Appbar>
`https://mui.com/material-ui/react-app-bar/#main-content`

- in these tag we can use our custom css with _ sx ={} _
I made a usefull REST API to help Frontend developers enrich their portfolio
Tags: api, webdev, opensource, showdev
Published: 2022-10-02 14:10:08


![Puzzles & games that you can create using Shadify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhxchcenxc1bvpystj35.png)

https://github.com/cheatsnake/shadify

I called it **Shadify** (means that something is in the shadows, hidden from others). This is a small and fairly easy to use REST API. It contains a collection of puzzles and games for which you can generate different data and do all sorts of logic (like checking if the solution is correct) directly on the server, via simple http requests.

## What can I do with it?
First of all, I think it can be useful for new front-end developers who want to enrich their portfolio with different projects (for many people it is really a problem to find an interesting idea for a new project, so we see a lot of similar todo lists, weather applications and so on). Now you can make interactive apps without worrying about complicated logic and focusing mainly on design.

## How can I help the project?
I want to make this project really useful. That's why I would like to develop it further, adding more and more interesting games and puzzles. So, if you know an interesting or rare puzzle, I'd be grateful if you'd tell me about it. But more importantly, I would like to keep lists of applications that people make with this API. So I would be very happy if you could send me links to repositories with your applications.

Have a nice day!
Add a New GitHub SSH Key Automatically 🔑
Tags: github, productivity
Published: 2022-10-02 13:53:15

Every time you get a new machine and want to connect GitHub with SSH, it's so annoying to set up. Generate the SSH key after googling for a while and then manually copy & paste it to GitHub on their webpage.

Is it possible to do this whole process on the command line? Yes!

Today I'll introduce this brilliant CLI tool - [gh-ssh-keygen](https://github.com/maxam2017/gh-ssh-keygen).

## How to use `gh-ssh-keygen`

There're two ways available.

Simply run this command if you don't want to install anything.
```sh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/maxam2017/gh-ssh-keygen/HEAD/gh-ssh-keygen.sh)"
```

Otherwise, you can install the whole command.

```sh
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/maxam2017/gh-ssh-keygen/HEAD/install.sh)"
```

> If this command has already been installed, it'll skip or upgrade if the new version is available.

Then, run
```
$ gh-ssh-keygen
```
After a few interactive steps, SSH key would be added to your GitHub account 🎉

If you want to know more about how to use it, checkout this video for detail!
{% embed https://player.vimeo.com/video/756117951?h=f86bfe4df1&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479 %}

## How this command works

Internally, it is powered by [Official GitHub CLI](https://github.com/cli/cli) which provides API to upload ssh keys.

```sh
$ gh ssh-key add [<key-file>] [flags]
```

Except that, I connect the whole process with the MacOS (and Linux) package manager `brew` and OpenSSH auth utils `ssh-keygen` together. 

Also, this command handles lots of package installation things and implement some extra validation for user input. Therefore, feel free to use it if you need to add SSH key to your GitHub account next time!

---

Welcome to follow me or star ⭐ ️my repo if you're interested in it.
GitHub Repo: https://github.com/maxam2017/gh-ssh-keygen
GitHub Account: https://github.com/maxam2017
Series: Things I Wish I Knew Before in JavaScript - Intro
Tags: javascript, beginners, series, webdev
Published: 2022-10-02 13:47:35

At the beginning when you're starting with JS, one of the things you realize quite fast is that there are so many ways to code something that you want to achieve (other than running that code without breaking everything), at the same time there is a lot of confusion between which method or procedure you should use, and when you look at the code of more advanced JS devs you might want to quit coding... but you don't have to, you can get there too.

I started programming in JS about ten years ago, and I know how frustrating it can be, especially at first when you are trying to run a code that might look like this:

```javascript
// My cool first serious project
// function switch
const active = false;
var  millionaireswitchproject = function(){
    if(active = true){
        active = false;
    } else {
        active = true;
    }
}

billionaireswitchproject();

//💰💸 stonks! 📈
```
I know, I know, this is an exaggeration and projects doesn't tend to look like this... or at least... I hope so...

This series will be based primarily on my own experience, but I'm sure many of you have encountered with some of this problems as well. If you are a beginner, this series could give you deeper insights into the JavaScript language, and if you are a senior JS dev (which I'm not) hopefully you'll learn a thing or two.

This Tuesday October 4th, I will upload the first part (of at least 5 parts) of this series.

Throughout this JavaScript series you'll learn about methods to write fewer lines of code and get the same output as you would in more complex procedures, how to write code of higher quality that's more accessible to others who read it, and insights on different operators and objects of this language.

If any of that interest you, stick with me!
In One Minute : aws
Tags: aws, beginners, programming, oneminute
Published: 2022-10-02 12:23:24

AWS is a subsidiary of Amazon that provides on-demand cloud computing platforms and APIs to individuals, companies, and governments, on a metered pay-as-you-go basis.
These cloud computing web services provide distributed computing processing capacity and software tools via AWS server farms.

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

As of 2021, AWS comprises over 200+ products and services including computing, storage, networking, database, analytics, application services, deployment, management, machine learning, mobile, developer tools, RobOps and tools for the Internet of Things. 
The most popular include Amazon Elastic Compute Cloud (EC2), Amazon Simple Storage Service (Amazon S3), Amazon Connect, and AWS Lambda (a serverless function enabling serverless ETL.

Most services are not exposed directly to end users, but instead offer functionality through APIs for developers to use in their applications. Amazon Web Services' offerings are accessed over HTTP, using the REST architectural style and SOAP protocol for older APIs and exclusively JSON for newer ones.

As of 2021 Q4, AWS has 33% market share for cloud infrastructure while the next two competitors Microsoft Azure and Google Cloud have 21%, and 10% respectively, according to Synergy Group.

Official Website :- https://aws.amazon.com/
Why I create a youtube chanel
Published: 2022-10-02 13:18:31

Before come to conclussion, I must say, I really like technologies, computer, internet.

Everyone needs opportunity to express feelings of happyness, sadness, emotions, skills.

Social media do the first thing, with facebook whatsapp most of the people express their happiness. They spend lot of time in facebook, instagram and other social media. 

Even myself also spending time earlier in social media, playing game. But over time it feels like someone always saying, you are wasting time in social media, and playing game. 

You know, when I started using computer, I played computer game over 10 hours per day. But somehow I know my primary goal. So, I tried to put my best effort where needed. 

And now I confident about my career, about my skills. So aprt of my work, I have need to do some things that is related to technologies. But it should be different from professional work, computer gamminng, seeing continuieus web episodes in different ott platform. 

So, over the time I attached to making content creation process in youtube. My primary motive is, It should not feel after 5 hours of work that I am wasting my time. Also, need some audience because of without audience, I can not motivate myself. And you know when I record my screens, that someone will watch this video. So I train myself for better fluency in speaking. 

Over the time, I likes video editing, captering different scene, spend some money for purchasing different tool and I think it becoming passion for me. 

Visit my chanel: https://www.youtube.com/channel/UCT_TFxOJPqVId32HQifN-Mw
A video tutorial on how to teach at Learnitive Education?
Tags: beginners, productivity, news, tutorial
Published: 2022-10-02 12:51:04

## How to teach at Learnitive.com?

Being a digital content marketplace, [Learnitive.com](https://edu.learnitive.com/blog/How-to-teach-at-Learnitive) allows you to create. or learn awesome video courses, interactive text-based courses, projects, quizzes, assessments and so on. We allow everybody to teach and learn just about anything of academic in nature at Learnitive.com.

{% embed https://www.youtube.com/watch?v=8vhpsYyRGVk %}

First, you create an account sign-in, then simple click on the become instructor button on the page [https://www.learnitive.com/become_instructor](https://www.learnitive.com/become_instructor) and you will become a Learnitive instructor immediately!

Website: [https://edu.learnitive.com/](https://edu.learnitive.com/)

The Learnitive courses offer playgrounds and challenges that execute right in the browser so that you can jump right in, stay immersed, and practice as you go. You can start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

### What is Learnitive? 

The **[Learnitive Education](https://edu.learnitive.com/) (Learn + interactive)** is an interactive and advanced e-learning platform. It not only gives you the opportunity to watch lessons with video, but also allows you to execute interactive illustrations, codes and OS commands inside your browser! It supports 50+ programming languages.

[First published at [Learnitive Education/blog](https://edu.learnitive.com/blog/How-to-teach-at-Learnitive)]
Console current value of state in react js
Tags: react
Published: 2022-10-02 12:31:51

we have a button and counter, we need once we clicked on button to console the current value of counter not the previous value 


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

This code will display the previous value of counter because the state is asynchronous so console.log(counter) will run first before state changed, and that is why we see the previous value of counter when write console.log(counter) in increment function 

That is result of above code 

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


we can solve this by using useEffect and write console.log() in useEffect like this code : 


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

and now if we clicked on button mean that we changed the state of counter and then useEffect will run becuase it depend on counter state, so we can see the current value of counter in the console 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks19ulqcpm04s0jyp33z.gif)
how can i add success page with customer details in php slim stripe
Tags: php, stripe
Published: 2022-10-02 12:29:29

```
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);

use Slim\Http\Request;
use Slim\Http\Response;
use Stripe\Stripe;




require 'vendor/autoload.php';

$dotenv = Dotenv\Dotenv::create(__DIR__);
$dotenv->load();

require './config.php';

$app = new \Slim\App;

$app->add(function ($request, $response, $next) {
    Stripe::setApiKey(getenv('STRIPE_SECRET_KEY'));
    return $next($request, $response);
});

$app->get('/', function (Request $request, Response $response, array $args) {
  return $response->write(file_get_contents(getenv('STATIC_DIR') . '/index.html'));
});

$app->post('/checkout_sessions', function(Request $request, Response $response) use ($app)  {
  $params = json_decode($request->getBody());
  $payment_method_types = [
    'usd' => ['card'],
    'eur' => ['card'],
    'cad' => ['card']
  ];
  $products = [
    'cause-a' => 'prod_KP3YP2a3IGYqsb',
    'cause-b' => 'prod_KP3iZRGcEjn5W8',
  ];

  $session = \Stripe\Checkout\Session::create([
    'success_url' => 'http://localhost:4242/?success=true',
    'cancel_url' => 'http://localhost:4242/?cancel=true',
    'mode' => 'payment',
    'payment_method_types' => $payment_method_types[$params->currency],
    'metadata' => [
      'cause' => $params->cause,
      'currency' => $params->currency,
    ],
    'submit_type' => 'donate',
    'line_items' => [[
      'price_data' => [
        'currency' => $params->currency,
        'product' => $products[$params->cause],
        'unit_amount' => $params->amount,
      ],
      'quantity' => 1,
    ]]
  ]);

  return $response->withJson([
    'id' => $session->id
  ]);
});

$app->post('/webhook', function(Request $request, Response $response) {
    $params = json_decode($request->getBody(), true);
    $event = \Stripe\Event::constructFrom($params);
    switch($event->type) {
      case 'checkout.session.completed':
        $session = $event->data->object;
        ob_start();
        var_dump('Checkout session completed!' . $session->id);
        error_log(ob_get_clean(), 4);
        break;
    }

    return $response->withJson([ 'status' => 'success' ])->withStatus(200);
});



$app->run();
```

https://www.youtube.com/watch?v=FOLRATK4pVA

i was trying this to learn stripe and i was wondering how can i show cause amount and customer details on success page so it can be used for verification what cause he paid for?
MY JOURNEY IN TECH
Tags: javascript, webdev, programming, fullstack
Published: 2022-10-02 12:28:53

Little did I know that I could learn so much detail and technicality in the software development field. 

My interest in tech all started in 2018 when I partook in the WTEC volunteer program. Here I was training young secondary school girls about the importance of tech in their education.
Fast-forward to August, 2022, I have a first-hand mind-blowing experience in software development when I started learning Full-stack engineering at [Brighter day Codelabs Academy](https://codelab-home.web.app/).

It's been 2 months of topsy-turvy nerve-racking moments of intense learning, unlearning and relearning both soft and technical skills. 
Transformational leadership courses, where we are being taught how to use our craft to impact the society has really affected me positively in the way i think and my interaction with people.
I have learnt a great deal in the last 2 months that I didn't even learn in 2 years (no pun intended).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fze84zzkj65x56fp7mqy.jpg)
From having zero programming knowledge, I have been able to learn UI/UX design, HTML and CSS, JavaScript, Typescript and project management with lots of hands-on projects to back up the knowledge.

Here are some examples:
•	Slider design: In this project, I used principles of design like typography, white-spacing, colour combination and so on. 
•	Izigo project: Here I put my knowledge of HTML, CSS and JavaScript to use. I collaborated with some great minds to build a haulage and logistics platform.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijjtjcad5umv8slt1j26.jpg)
 
My biggest and most challenging project so far is izigo project which was picked as a unicorn idea. I learnt how to use CSS grid. It took me a lot of time and sweat to figure out a lot of things.
Easiest project is when I created a sign-up form page.
My challenges so far have been the fast-teaching pace of my coding instructors which I find difficult to cope with sometimes. This is coupled with me finding it hard to understand lots of things at the same time. I also have issues getting the concepts of typescript, data structures and algorithm. 
 
Night and day I'm labouring hard and sparing no effort to overcome these challenges and take advantages of opportunities in the tech space. 
I'm looking at becoming a World class programmer in the space of 5 years. Who knows, I might be the next Elon Musk of Africa
Quick tip 1 - How to remove an index signature from a type?
Tags: typescript, webdev, devjournal, tutorial
Published: 2022-10-02 12:26:19

## Prehistory

During my work as a React developer, I found a situation when you need to remove an index signature from a type. 
A simple example, the type utility `Omit` doesn't work properly when a type has an index signature. I've worked with the `react-select` js library and I'd wanted to get all base attributes of a `SelectProps` using `Omit<SelectProps>`, but received an `any` type. Trying to solve the problem, I located a problem inside `SelectProps` - it extends from a `SelectComponentsProps` which is a mapped type. 

## Solution

The solution is to remove the index signature. How to do it? In TypeScript 4.1 and onwards, you can re-map keys in mapped types with an `as` clause. We can create a utility type with generic and it will remove all index signatures in a specified type:

```ts
type RemoveIndexSignature<T> = {
  [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K]
}
```

## What does it do? 

It iterates through the keys of a type and checks, if a type of the key is `string`, `number`, or `symbol`, then removes it, otherwise keeps it in the type. In the end, you'll get a clean type without any index signature in it.

## Example

```ts
type Base = { [key: string]: boolean }

type User = Base & {
  email: string
  name?: string
}

type Cleaned = RemoveIndexSignature<User>

type Cleaned = {
  email: string
  name?: string
}
```

Photo by [Alex Kotliarskyi](https://unsplash.com/@frantic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/programming-tips?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Ruby: When to use protected
Published: 2022-10-02 12:12:12

One of my pet peeves (I have a few) is finding the `protected` keyword in the wild because 99% of the time (seriously) the developer does not understand its use.

The use case is simple. You want an instance of a class to be able to access what would normally be private within another instance of the same class. For example, you are trying to apply an operation (e.g. multiply) on some item of state within the two classes; it has to be possible for one of the classes to reach into the other class and get a value for the operation to be applied. 

Using multiply as an example: 

```
class A
  def initialize(value) = @value = value

  def *(other) = value * other.value

  protected

  attr_reader :value
end

a1 = A.new(3)
a2 = A.new(4)

puts a1 * a2
```

It should be no surprise that this prints `12` when run.

If the value has been `private` rather than `protected` the output would be:

```
protected.rb:5:in `*': private method `value' called for #<A:0x000000010520e1c0 @value=4> (NoMethodError)

  def *(other) = value * other.value
                              ^^^^^^
        from protected.rb:15:in `<main>'
```

So protected has nothing to do with inheritance (as many people seem to think), everything to do with constraining access to state only to instances of the same class. 

I give the slightly more lengthy explanation there because the question does arise of why not to just use `public`? The answer, to quote myself, encapsulation is vital in complex software systems. Everything that is public increases the surface area of a class and hence the cognitive overhead when working with the code. A classes public surface area should be as small as possible and `protected` allows you to achieve this.
ToppestBwoy|Maliamungu Swalleh
Tags: toppestbwoy, javascript, quantummarketing, maliamunguswalleh
Published: 2022-10-02 12:10:32


**Maliamungu Swalleh** aka [ToppestBwoy](https://about.me/toppestbwoy)  

    **Born**: 
February, 28/2000
 
      **Skills**:  
_•Professional in Digital Marketing,  
•Digital Products and Events Marketing.
   
•Website Development,   Professional in WordPress Development, 
  
•Computer Graphics Expert.
•Computer Networking and Troubleshooting.  
  
•Computer Hardware Technician and E-commerce Professional Salesman. 
•SocialMedia Marketing and Management.
•Cyber Analysis and so many others._


     **Business**: 
•Owner Of Quantum Marketing Uganda 
•BoxingBlogger; 
•ToppestBwoy Uganda,
•Digital Marketing And Management Uganda.

**Education Background**:
Primary School:
_•Naguru Infant Primary School Kampala Uganda,(2016)_

Secondary School: 
_•City High School Kampala, Uganda (O-Level,2019)_

**Certificate**:  
_•ICT at Uganda Institute of Information and Communication Technology  UICT,(2022-2023)_

**Certificate**: 
_•Digital Marketing And Management at SimpleLearn(Online)_