teleren/devto huggingface dataset:
Singletons in TypeScript
Tags: javascript, typescript, programming, oop
Published: 2022-07-19 13:54:26

## What exactly is a singleton?
Singleton is a design pattern which allows you to create only one instance of a class and no more.

## How can I implement singleton?
Best way to understand a concept is using an example.

So, let's say I want to create a class which can have only one instance and I want this class to have two variables: id and name, and one method which logs those variables.

I will first create a class named `MyInfo` and add a private variable called as `instance` which has a type of it's own class.
As the name justifies itself, we will use this `instance` variable to store instance of our class.

```typescript
class MyInfo {
  private static instance: MyInfo;
}
```

I will then create a private constructor method. The reason for making the constructor private is to prevent usage of `new` to create a new instance of class outside the class.

```typescript
class MyInfo {
  private static instance: MyInfo;
  private constructor(public id: number, public name: string) {}
}
```

Since we have made our constructor private, we need a way to make an instance of our class.
We do this by making a static method which checks if the class already has an instance. If our class already has an instance we return the same instance and if not we create a new instance and store that instance in our `instance` variable and later return the same.
We can do this as follows.

```typescript
class MyInfo {
  private static instance: MyInfo;
  private constructor(public id: number, public name: string) {}
  static getInstance() {
    if (this.instance) {
      return this.instance;
    } else {
      this.instance = new MyInfo(1, "Musaib");
      return this.instance;
    }
  }
}
```

We can now implement `getDetails` method which logs our `name` and `id`.

```typescript
class MyInfo {
  private static instance: MyInfo;
  private constructor(public id: number, public name: string) {}
  static getInstance() {
    if (this.instance) {
      return this.instance;
    } else {
      this.instance = new MyInfo(1, "Musaib");
      return this.instance;
    }
  }
  getDetails() {
    console.log(`Hi i'm ${this.name} and my id is ${this.id}`);
  }
}
```

Now let's check if we can make an instance and get our details.

```typescript
const obj = MyInfo.getInstance();
console.log(obj);
obj.getDetails();
```

Here's the output to our code 👇

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

## What if I try to make another instance using the same `getInstance` method?
As a matter of fact you can totally do that!
BUT, the new instance that you have created points to the same memory location as our OLD instance😁.

## What if I still use `new` outside the class?
If you try to make a new instance of the class outside the class using `new`, you get an error saying `Constructor of class 'MyInfo' is private and only accessible within the class declaration.ts(2673)` and hence we cannot make a new instance.
UITabBar not showing
Published: 2022-07-19 13:48:36

Maybe your ios app have a Login ViewController just before a TabBarController, and you want the TabBarController appear after login Success :) 
Doing this by:

```
let nextVC = self.storyboard?.instantiateViewController(withIdentifier: "Home") as! HomeViewController
                nextVC.modalPresentationStyle = .fullScreen
                self.present(nextVC, animated: true, completion: nil)
```
The result is TabBarItem not appearing in the HomeViewController :(


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


You can avoid this by creating a UITabBarController files and assign this at UITabBarController, and point at this instead of HomeViewController

```
let nextVC = self.storyboard?.instantiateViewController(withIdentifier: "tabBar") as! TabBar
                nextVC.modalPresentationStyle = .fullScreen
                self.present(nextVC, animated: true, completion: nil)
```


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


And the result is the TabBarIter are showed correctly 🥳🥳🥳
Azure Cloud Resume with a visitor counter
Tags: azure, javascript, github
Published: 2022-07-19 13:26:39

This article is for the [#CloudResumeChallenge](https://cloudresumechallenge.dev/docs/the-challenge/azure/) by [Forrest Brazeal](https://twitter.com/forrestbrazeal).

[My github repo](https://github.com/mcheath31/CloudResume)
[My site](https://www.mcheath.com/)

## Introduction

When I started learning more about cloud and wanted to start pivoting my career towards it, I was becoming overwhelmed. The internet is filled with things claiming to be 'The way to get a job in the Cloud.' 

I found the Cloud resume challenge and originally had started in AWS, studying for the Solutions Architect exam. When life got in the way I had to shelf that and came back to the challenge in 2022. This is where I started to change to Azure.

## The Challenge

Tools used

- Github
- Html/CSS/Javascript
- Node.js
- CI/CD (Github Actions)
- Azure CosmosDB
- Azure Functions
- Azure Static Webpage hosting via a storage account
- Azure CDN

The challenge consisted of utilizing multiple technologies, both inside of Azure and outside. Learning Azure felt like a fraction of the challenge where implementing them hands-on is where the real learning occurred. My order of operations during this challenge came with building the site first, this was finding a template and filling my information out. I look to change some of the webpage as well as add some more information at a later date.

After the webpage I created the CosmosDB database while using serverless capacity to save on budget. This consisted of one database, one container and one item to house the counter for the webpage.

Next on the block was my azure function, which I would say was the toughest part of my challenge as I had never needed to produce an api. A lot of my time was spent here with trial and error. Initially I had tried C#, and then python but settled on Node.Js. I was able to get this working and displaying locally on my site. Once that was done, I deployed the function to azure, as well as deployed the site to static hosting.

The next portion was setting up the custom end point, I purchased my domain, pointed the addresses at each other and waited for the DNS to catch up. I made sure to change the CORS rules in my Azure function, and everything on the website was good to go.

The last thing was to make my pipeline, I utilized Microsoft Docs. While following the instructions on setting up [Github Actions](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blobs-static-site-github-actions?tabs=userlevel), I made a few stumbles while forgetting names and not checking my working directory, I was able to push my frontend to github to azure while passing the builds.

## Going forward

There are a few different things I am looking to implement with the site moving forward. I will be building unit testing for my backend, as well as implemented infrastructure as code via Terraform. I will be upkeeping the site normally and looking for new pieces to add to this project as time goes on.
CSS ESSENTIALS
Published: 2022-07-19 13:18:23

Type of css selectors
1]Type Selectors: It is a name of an element and it captures every element in that type.
2]Descendant Selectors: It helps element to nest in other elements.
3]Class Selectors: It helps reuse bit of codes.

How to create a page layout with floats
1]The "float" and "width" properties can be used to create column
2]Clear your floats
3]There are different units of measure for the width property
with percentage,px,and many others.
FAST Web Components on 20minJS
Tags: podcast, webcomponents
Published: 2023-04-17 13:49:17

---
title: FAST Web Components on 20minJS
published: true
date: 2022-07-19 13:17:26 UTC
tags: podcast,webcomponents
canonical_url: 
---

Recently [Chris Holt](https://github.com/chrisdholt) and [Rob Eisenberg](https://medium.com/@eisenbergeffect) from the FAST team had the opportunity to discuss Web Components with [Fernando Doglio](https://www.linkedin.com/in/fernandodoglio/) on [the 20minJS podcast](https://podcast.20minjs.com/).

The discussion covered so much content that it needed to be split into two episodes:

- [Part 1: Episode 14 — Web Components with Chris Holt and Rob Eisenberg](https://podcast.20minjs.com/1952066/10744129-episode-14-web-components-with-chris-holt-and-rob-eisenberg)
- [Part 2: Episode 15 — Web Components with Chris Holt and Rob Eisenberg](https://podcast.20minjs.com/1952066/10783154-episode-15-web-components-part-2-with-chris-holt-and-rob-eisenberg)

I hope you enjoy listening to the conversation 😃
Creating a Discord bot with cookiecutter
Tags: python, cookiecutter, discord, beginners
Published: 2022-07-19 12:57:42

## Preamble 
Let's get a bot running as quick as possible. For this we're going to use [cookiecutter](https://github.com/cookiecutter/cookiecutter) and [NAFF](https://github.com/NAFTeam/NAFF). Cookiecutter will build us an oven-ready project, and NAFF will facilitate using the Discord API. 

## Disclaimer
This tutorial does not aim to teach you how to program a bot, purely how to use cookiecutter to build a NAFF project. Check out the other guides in this series for that.

## Let's get started
First, let's get cookiecutter installed:
```bash
>$ python3 -m pip install cookiecutter
```
And now let's build our project. 
```bash
>$ cookiecutter https://github.com/NAFTeam/Bot-Template
< There will now be a couple of terminal prompts to help you set up your personalised discord bot
----------------------------------------------
Arguments:
'project_name' - The name of your project
'project_slug' - A formatted version of your project name, which is used as a filepath and for the docker container names
'license' - What license your project should have. Can be safely ignored should you not plan on openly publishing this project on the internet
'license_organization' - The name that should appear on the license
'load_debug_commands' - If some helpful debug commands should be loaded. These will only be accessible to the owner of the bot
'discord_token' - Your discord bot token. This will not be pushed if your use this project with git
----------------------------------------------
Press 'Enter' to start
]:
```
From here, answer the questions, and when you're done, your project will be ready. 

```bash
< project_name [New Discord Bot]: 
>$ test project
< project_slug [test-project]: 
>$ test-project
< Select license:
1 - MIT
2 - BSD-3
3 - GNU GPL v3.0
4 - Apache Software License 2.0
Choose from 1, 2, 3, 4 [1]: 
>$ 1
< license_organization [Your Name]: 
>$ LordOfPolls
< Select load_debug_commands:
1 - true
2 - false
Choose from 1, 2 [1]: 
>$ 1
< discord_token [changethis]: 
>$ [your_token_here]
```

You now have this project structure: 
```
test-project
├───core
└───extensions
```
`core` contains the bot itself, logging, and an extension loader. `extensions` holds all of your extensions which will be automatically loaded thanks to the extension loader. 

From here, you can run the bot by running this:
```bash
>$ python3 -m pip install -r requirements.txt
>$ python3 main.py
```
Have a look around, and enjoy developing your bot! If you want more info, check out [NAFFs Docs](https://naff-docs.readthedocs.io/en/latest/) or one of the other guides in this series.
DynamoDB get all records
Tags: aws, dynamodb, boto3, python
Published: 2022-07-19 13:13:30

Hey,

Here is a quick hands-on of retrieving all rows from a dynamodb table.

`
from pprint import pprint
from time import sleep
import boto3
from botocore.exceptions import ClientError


def get_data(dynamodb=None):
    if not dynamodb:
        dynamodb = boto3.resource('dynamodb',region_name='YOUR_REGION')

    table = dynamodb.Table('YOUR_TABLE_NAME')

    try:
        response = table.scan()
        data = response['Items']

        while 'LastEvaluatedKey' in response:
            response = table.scan(ExclusiveStartKey=response['LastEvaluatedKey'])
            data.extend(response['Items'])
        
    except ClientError as e:
        print(e.response['Error']['Message'])
    else:
        return response


if __name__ == '__main__':
    data = get_data()
    if data:
        pprint(data, sort_dicts=False)
`

P.S:
1.You need to configure the aws credentials.
2.Replace YOUR_REGION with the region name where the dynamodb table is located.
3.Replace YOUR_TABLE_NAME with the actual name of the dynamodb table.

Feel free to ask if you have any clarifications.
The Best GitHub Repos for Self-Taught
Tags: beginners, programming, git, webdev
Published: 2022-07-19 13:06:00

[Project-Based Learnings](https://github.com/practical-tutorials/project-based-learning)

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

[Free Programming Books ](https://github.com/EbookFoundation/free-programming-books)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k24yn69ii97h333l835y.png)
<br>
[Developer Roadmap ](https://github.com/kamranahmedse/developer-roadmap)
<br>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0axygbmib5k63wq4len.png)
<br>
[Public API’s ](https://github.com/public-apis/public-apis)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rst6w8z9a0w03cy4hft.png)

<br>
[Coding University ](https://github.com/jwasham/coding-interview-university)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbtnxjayc5agccv3bse2.png)
<br>
[Awesome Python ](https://github.com/vinta/awesome-python)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si3x7i4bwf8csstojaag.png)

<br>
[Awesome ](https://github.com/sindresorhus/awesome)

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

<br>

[Tensor-Flow](https://github.com/tensorflow/tensorflow)
 <br>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9p34h0klzi3e6wjqi82.png)

<br>
[FreeCodeCamp](https://github.com/freeCodeCamp/freeCodeCamp)
<br>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c49eerc15zw3ir2od4wk.png)
  
**If you found this helpful, make sure to show your support with a like, and if you want to help others in their projects, a share would be greatly appreciated! Let me know what you think about this! Happy Learning!**
Compression of similar images and cloud storage.
Tags: compress, webdev, startup, algorithms
Published: 2022-07-19 12:53:36

## Introduction
I was thinking about a new startup plan that will make my pockets filled. But really got disappointed of my damn small brain's cheap ideas those were already in the market. Every ideas I got, it is listed somewhere in the Google with some big firms. But finally I ended up with an idea inspired from the very famous show 'Silicon Valley' that everyone must have thought about it once at least.
But it's not like the bloody damn internet breaking algorithm where we can compress a big 12 Gigabytes file into 100 Kilobytes without any loss. Nah, we need a couple of decades to solve that.

## The idea
What I thought about is, what if we have a hundred images with some of its parts looking similar each other. let's imagine the 1/4 of every picture looks the same and we can take that part as a common image. It would buy us 25% of the space for free. This is the least-cool idea came up in my mind.
When we build a cloud storage and millions of users upload their images, there would be at least a 100 K image pairs look similar each other. And we can save a good amount of space.

## The relevance
I am not sure whether the popular cloud storage services like Google drive, Onedrive or DropBox are using this concept or not. But it's sure that if we can develop an algorithm, it would be a big milestone.

## References
I found only a few articles about the image set compression and only one impressed me.
This is the [link](https://ietresearch.onlinelibrary.wiley.com/doi/full/10.1049/el.2018.7342) I found in the internet.
It says we can build an algorithm to compress a set of similar images with priorities. 
These are the steps of the algorithm:
![Steps of compressing a set of images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foqfl7cvk632wmx4vzg5.png)

## Conclusion
It's a pleasure if anyone is interested in such a project. Do comment your opinions. Let's help each other to bring more articles and build a good algorithm. Also we have to build a cloud storage. Let me know if you are interested.


[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/pulimoodan)
5 NPM Packages you can use for Drag & Drop in your React app 🙌
Tags: javascript, react, npm, webdev
Published: 2022-07-19 12:52:51

Drag & Drop is something that can enhance your user's experience if you are building graphic designing tools like Canva. A few days back, I developed a blog post cover designing tool titled [Cover-Builder](https://cover-builder.vercel.app/) that allows you to create nice cover images for your blog posts. The tool heavily relies on Drag & Drop feature. This was the first time, I was looking to add Drag & Drop into any of my apps & luckily found some cool packages.


![Hope-you-guys-are-excited](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvqaqqqyej5o45a1savf.gif)

**1. [React-Dnd](https://react-dnd.github.io/react-dnd/about) -** When it comes to dragging into different parts of your application then this is the most used package by developers.
**Note:** You will also need to install a second package `react-dnd-html5-backend` so that react-dnd can use HTML 5 drag-drop API under the hood.

**2. [React-Beautiful-Dnd](https://www.npmjs.com/package/react-beautiful-dnd) -** Most famous package to create beautiful **drag and drop lists** that anyone can use - even people who cannot see. It provides you features like multi-dragging, auto-scrolling, and support for mouse, keyboard, and touch devices.

**3. [React-Draggable](https://www.npmjs.com/package/react-draggable) -** Unlike the react-dnd package, you need to install only a single package here. It provides you a draggable component that you can wrap around the element you are looking to drag & that's all. Here you can also pass props like defaultposition, axis & some others for customization.

**4. [React-Rnd](https://www.npmjs.com/package/react-rnd) -** If you are looking to **resize your items with Drag &Drop** then this is for you. Like React-Draggable it also allows you to pass some props for better customization.
**Note:** It also has a bound prop which allows you to bound Drag & Drops in a particular region.

**5. [React-Dropzone](https://react-dropzone.js.org/) -** Creating Drag & Drop feature for **uploading files** is not so easy task, many JS events are involved in it. This package makes file Drag & Drop handling easy for you.


🏁 The aim of the article is to give you a brief look of available Drag & Drop packages which can make Drag & Drop easy for you. If you have used another package let me in know in the comments.

Thank you for reading.

![ok-bye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kxxr09xpujtt1lic9s5.png)
Rapyd Developer Newsletter: June, 2022
Tags: payments, fintech, webdev, api
Published: 2022-07-19 12:49:04

## Rapyd Hack the Galaxy Continues! 🚀 
The [galaxy’s greatest contest for developers](https://hackthegalaxy.dev/) has launched. Join the Rapyd Developer Community to win prizes that are truly out-of-this-world! You could win a trip to the edge of space or $130,000 USD.


[Rapyd Hackathon - Build the Galaxy’s Best Payment App for Space Tourism](https://htg2.devpost.com/?utm_source=hs_email&utm_medium=email&_hsenc=p2ANqtz--uSrGAygAikm0yxjHt1zyBJUob_px3pEjpOrUYxBKJoST3sET6z2F-5aoURZlJ8pJXIKyu) ends on Thursday, July 21st, 2022 @ 5:00 pm EDT. Submit your project before the deadline to compete for a cash prize and a chance to present your idea at the Rapyd Demo Day in Lisbon!

 
## Changelog
### General Updates
[Hosted Pages](https://docs.rapyd.net/build-with-rapyd/changelog/rapyd-support-google-pay-toolkit-integration-escrow?utm_source=hs_email&utm_medium=email&_hsenc=p2ANqtz--uSrGAygAikm0yxjHt1zyBJUob_px3pEjpOrUYxBKJoST3sET6z2F-5aoURZlJ8pJXIKyu#general-updates) now include the ability to set the default language in Greek. End Users Can also select Greek as a supported language in the checkout language menu.

### Collect Updates
The Checkout Toolkit Integration now includes [Google Pay](https://docs.rapyd.net/build-with-rapyd/docs/google-pay?utm_source=hs_email&utm_medium=email&_hsenc=p2ANqtz--uSrGAygAikm0yxjHt1zyBJUob_px3pEjpOrUYxBKJoST3sET6z2F-5aoURZlJ8pJXIKyu#google-pay-toolkit-integration). Refer to the [Client Portal Guide](https://docs.rapyd.net/client-portal/docs/activating-google-pay?utm_source=hs_email&utm_medium=email&_hsenc=p2ANqtz--uSrGAygAikm0yxjHt1zyBJUob_px3pEjpOrUYxBKJoST3sET6z2F-5aoURZlJ8pJXIKyu) on how to activate Google Pay in the Client Portal.

https://community.rapyd.net

## Discover
### [Virtual Account Number Object](https://www.youtube.com/watch?v=UvtudhYRJi4&utm_source=hs_email&utm_medium=email&_hsenc=p2ANqtz--uSrGAygAikm0yxjHt1zyBJUob_px3pEjpOrUYxBKJoST3sET6z2F-5aoURZlJ8pJXIKyu) `/videos`

Learn about the Virtual Account Number Object, how to Issue a Virtual Account and Simulate a Transaction.

### [Rapyd Changelog](https://www.youtube.com/watch?v=UUH2SFZrxqU&utm_source=hs_email&utm_medium=email&_hsenc=p2ANqtz--uSrGAygAikm0yxjHt1zyBJUob_px3pEjpOrUYxBKJoST3sET6z2F-5aoURZlJ8pJXIKyu) `/videos`

Learn more about recent updates including the Google Pay Toolkit, Client Portal Support and Escrow Payments. 

### [Rapyd DevTalk: So You Want to Test Your APIs?](https://community.rapyd.net/t/rapyd-devtalk-so-you-want-to-test-your-apis/7733?utm_source=hs_email&utm_medium=email&_hsenc=p2ANqtz--uSrGAygAikm0yxjHt1zyBJUob_px3pEjpOrUYxBKJoST3sET6z2F-5aoURZlJ8pJXIKyu) `/videos`

On Tuesday, July 19, 4 PM UTC, join Dave Westerveld to help you discover how you should go about testing an API

## Share
Reply back to this email and let us know what you would like to see more or less of in this newsletter, or take this short [survey](https://rapyd.sjc1.qualtrics.com/jfe/form/SV_3avr0lw9WjuJNWK).

Talk code with us on [Twitter](https://twitter.com/RapydDevs), [community](https://community.rapyd.net/).
Integrando 'Windows Terminal' e 'Cmder': o melhor das duas ferramentas.
Tags: winterminal, cmder, tools
Published: 2022-07-19 12:47:04

Sempre preferi utilizar o terminal (ou cmd) para fazer os commits do Git, subir os projetos Springboot ou subir o projeto Angular local, externamente à IDE, até que descobri um terminal bem interessante para utilizar no Windows, o [Cmder](https://github.com/cmderdev/cmder), nele podemos utilizar tanto os comandos do Windows quanto do Linux.

O "problema" é que parece que os desenvolvedores do Cmder pararam de evoluí-lo, se dedicando mais ao [ConEmu](https://conemu.github.io/).

Então recente decidi instalar o [Windows Terminal](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=pt-br&gl=br&icid=CNavAppsWindowsApps) e ver o quanto ele havia evoluído, foi quando encontrei um tutorial bem bacana de como integrar as duas ferramentas.

No Medium do [Wolfgang Dielingen](https://medium.com/@wolfgangdie) ele explica o passo a passo para fazer esta integração, vou deixar o link aqui: [Windows Terminal + Cmder = ❤️](https://medium.com/talpor/windows-terminal-cmder-%EF%B8%8F-573e6890d143).

Muito simples e rápida a configuração. :clap: :clap: :clap:

Já estou utilizando e ficou bom demais! :grin: