teleren/devto huggingface dataset:
Never get overcharged by AWS again
Tags: cloud, aws, showdev
Published: 2023-01-27 00:17:24

If you're a dev who has experimented with the cloud, the fear of a surprise huge bill has crossed your mind. You aren't alone. You can go to twitter and search "AWS Bill" and see hundreds of tweets either making jokes or sharing their real life experience of a surprise cloud bill. It's a reality that shouldn't be, and now doesn't have to be anymore.

Introducing <a href="https://cloudkillswitch.com" title="Cloud Kill Switch" target="_blank">Cloud Kill Switch</a>. This is the first (and only) product that automates the ability to set a billing limit in your cloud account.

This is how it works:

1. You authenticate your cloud account. Right now you have to input an access key and access secret for AWS, but we delete these from our database as soon as your kill switch is implemented. For Google Cloud we use Login with Google (oauth).
2. Using our product, you set your configurations in plain language, no cloud knowledge necessary!
3. You pay the simple, one-time fee. 
4. Our server goes to work installing all configurations necessary on your cloud account to make your billing limit a reality!
5. If your account hits the billing limit, it does the following:
a. For AWS, it shuts down the resources (either RDS or EC2) that you defined when you configured your kill switch. 
b. For Google Cloud, it removes your billing account completely, ending billing right then and there. 
In both situations it means your services will stop working, so it is not suitable for production use, just for hobbyists and students to protect your wallet and peace of mind!

This has been an idea I've had for a long time, and something I have installed on all my test accounts! Right now it's still in beta and, so would love any feedback on it, and we're launching with AWS right now supporting just USD. Google Cloud is still in a closed beta. If you want access to that closed Google Cloud beta, email me at support@cloudkillswitch.com !
JavaScript tip to efficiently search in long arrays and save performance
Tags: javascript, react, arrays, objects
Published: 2023-01-27 00:11:40

Let's assume We've this array contains 100 elements

```javascript
const arr = [
  {
    id: 1,
    value: "Hello 1",
  },
  {
    id: 2,
    value: "Hello 2",
  },
  .....
  {
    id: 100,
    value: "Hello 100",
  },
];
```

When we try to search for any element in this array by ID for example

```javascript
const element50 = arr.find(el => el.id === 50);
```

The time complexity here is **O(n)**, **n** is the number of array elements, Which means in the worst case if I'm looking for the last element, It'll loop on all array elements to find that last element, And if We search a lot in this array it'll  affect app performance so badly.

What we can do here is mapping this array to be an object of keys and values, Keys are the item we search by, In our case it's the **ID**, And values are the remaining attributes ...

So let's create our new object

```javascript
const arr = [
  {
    id: 1,
    value: "Hello 1",
  },
  {
    id: 2,
    value: "Hello 2",
  },
  {
    id: 100,
    value: "Hello 100",
  },
];
let arrayMap = {};
arr.forEach(el => {arrayMap[el.id] = el});
```

Now our object **arrayMap** will be like this

```javascript
{
  1: {
    id: 1,
    value: "Hello 1",
  },
  2: {
    id: 2,
    value: "Hello 2",
  },
  ....
  100: {
    id: 100,
    value: "Hello 2",
  },
}
```

So now if we want the 50th element We'll do this

```javascript
const element50 = arrayMap[50];
```

Now time complexity will be O(1), It won't loop on other elements to find the element we want, It'll just get it as an attribute from our new object .. By this We'll save a lot of operations especially if We search a lot in a large array.

So here're the steps We follow to make search in arrays more efficient

1. Create a new empty object
2. Map our array to be keys and values in our object, **Keys are what we search by**, And values are the object itself
3. We search using object square brackets, **EX: obj[id]**


The only one limitation when using this trick is that We can only search for an exact value, For example we can't use it to search for an element that includes a specific text, But we can do for an element that exactly equals a specific text.

## Conclusion:

1. Time complexity for searching in arrays is O(n)
2. Time complexity for indexing an object attribute is O(1)
3. By mapping our array to an object then find elements by indexing this object, We decrease time complexity from O(n) to O(1)

Happy coding!
How to Build a Crypto Investment Website with Elementor - (Advance Wordpress) 2023
Tags: webdev, javascript, programming
Published: 2023-01-26 23:58:04

In this tutorial, we will show you how to develop a cryptocurrency investment website using Elementor and advanced WordPress features. This is Part 1 of the series, so stay tuned for more in-depth instruction on how to create a professional and functional website for your crypto business. Whether you're new to website development or an experienced developer, this tutorial will provide valuable information and tips for creating a successful online presence for your cryptocurrency investment business.

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

Get the full Template with Dashboard ----  https://bit.ly/armtchc
If you find this useful, please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via:
Instagram: @arems.dev
Facebook: @ahmed.idowu90
How to create a popup overlay modal in figma - Figma UI Design 2023
Tags: webdev, figma, tutorial, react
Published: 2023-01-26 23:56:32

Figma, Tutorial, Design, Web Design, UI/UX, User Interface, User Experience, Popup, Overlay, Modal, Interactive, Advanced techniques, Beginner, Intermediate, Graphic design, Figma Design, Figma Tutorial, Web design tutorial, UI design, Mobile app design, Presenting information, Presenting options, Presentation, Figma tips, Figma tricks, Figma interactive design, Figma modal overlay.

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

If you're working on a project that involves user input, then this video is for you! We'll show you how to create a popup overlay modal in figma that will allow you to display different content based on the user's input. This modal will be perfect for displaying different content based on the user's status or the content of a dialog box. So be sure to check out this video and learn how to create a popup overlay modal in figma!


In this tutorial, we'll show you how to create a professional and functional popup overlay modal in Figma. Whether you're working on a website or mobile app design, a modal overlay can be a great way to present important information or options to users. We'll take you through the process step by step, from setting up the initial layout to adding the interactive elements. We'll also show you some advanced techniques to make your modal look and feel great. This tutorial is perfect for both beginners and experienced designers looking to add a modal overlay to their projects
How to create Animated Floating button in figma - Mobile UI design 2023
Tags: figma, webdev, javascript, programming
Published: 2023-01-26 23:54:18

In this quick video, we will show you how to create an Animated Floating Button in Figma Mobile UI design. This button will show a rotating animation when it is clicked.

If you want to learn how to create Animated Floating Buttons in Figma Mobile UI design, then this video is for you! By the end of this video, you will know how to create a simple but effective Animated Floating Button in Figma. This button can be used in any mobile app or website!


{% embed https://youtu.be/x3fPC_6cDAA %}
Learn how to create a sleek and modern animated floating button in Figma! In this tutorial, we'll cover all the steps you need to know to create a stunning floating button that will add a touch of animation to your design. From setting up the initial layout to adding the animation, we'll take you through the process step by step. Whether you're a beginner or an experienced designer, this tutorial is perfect for anyone looking to add a dynamic element to their designs. So grab your Figma account and let's get started!

If you find this useful, please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via:
Instagram: @arems.dev
Facebook: @ahmed.idowu90
How to display nested data when using Angular + Firebase
Tags: angular, firebase, javascript, tutorial
Published: 2023-01-26 22:59:25

Hello, everyone.

I've been working on a project recently, and I've been excited to try out Firebase as my backend.

I'm working on a project right now that's essentially an online 'practice log' for musicians. A way to track your practicing hours, skills, and even offer a few practice tools along the way. 


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





Anyways, let's get into the project... When I started fetching my data that I'd stored in Firebase's realtime database, I noticed a glaring issue right away.  

Instead of sending an an array inside of an array, the data sends back as objects of key value pairs that are nested inside of the array.

**IMPORTANT TERM: KEY VALUE PAIR**
Key ->  { 0, 'Coding is hard' } <- Value 
The key is 0, the value is 'Coding is hard'. 
Key value pairs are beneficial for scalability, speed, and numerous other things.

Now, one thing to note, is that if you are looping through data in Angular, using an *ngFor, the data MUST be in an array. 


This is how the data presents in the realtime database: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1az8nx7rmvob06jwrl64.jpg)

And here it is printed to the console:

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

You can see that the fields 'skills' and 'instruments' are not arrays. They are an object with multiple key value pairs. 

My data from Firebase is being held in a variable called 'logList'. 

```javascript
logList: Log[];


myFunction() {
  this.logList.forEach((log) => {
        log.skills = Object.values(log.skills);
        log.instruments = Object.values(log.instruments);
      });
}
```



1. Target logList and get each item from its array separately using forEach.
2. Take only the value part of each key value pair using the javascript 'Object.values' method. 

Easy! 

The Object keys functions are so helpful!
Ex. 
Object.values() gets the value out of the key value pair.
Object.keys() gets the key out of the key value pair.


Now my data looks like this: 

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

You can see the _array_ [] surrounding 'skills' and 'instruments' now, instead of _object_ {}.

So now I can display this data like so:

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

I tried to keep this pretty simple, so if you have any questions specifically leave a comment below! Also, google is awesome and should be your best friend. :-) 

What do you want to see next?


Thank you for reading! - Julie
3 Small (But Easily Fixable) Mistakes Fresh Consultants Make When Starting Their Career
Tags: career, beginners, writing, productivity
Published: 2023-01-26 23:53:39

Starting a career as a consultant can be exciting, but it also comes with its own set of challenges.

Fresh consultants often make small mistakes that can significantly impact their success. New consultants can set themselves up for a successful and rewarding career by being aware of these common pitfalls and avoiding them.

## Mistake #1: Don't Prepare Enough For Meetings

To have a great meeting, you need to be prepared.

One of the fresh consultants' most common mistakes is not preparing for client meetings properly. This can include not researching the client's industry, not having a clear agenda for the meeting, and not having a solid understanding of the client's needs and goals. Proper preparation is essential for building credibility with clients and demonstrating that you are a professional committed to delivering high-quality work.

So make sure you come prepared to your meetings to make the best of them.

## Mistake #2: Not Asking For Feedback

You can't solve every problem alone.

Fresh consultants also make the mistake of not seeking feedback from clients or colleagues. Feedback is essential for growth and improvement and can also help build trust and credibility with clients. By asking for feedback, fresh consultants can gain valuable insights into what they are doing well and where they need to improve.

So get your feedback, and let it guide you.

## Mistake #3: Failing To Communicate Effectively

Communication is the key element that ties everything together.

Finally, fresh consultants can struggle to communicate effectively with clients and team members. This can include not being clear in communication, not being responsive to client's needs, and not providing regular updates on progress. Effective communication is essential for building trust and credibility with clients, and it is also crucial for ensuring that projects are completed on time and within budget.

Being an effective communicator will also help you become more confident and jumpstart your career.

## Conclusion

Starting a career as a consultant can be challenging.

But by being aware of these common mistakes and avoiding them, fresh consultants can set themselves up for success. Proper preparation, seeking feedback, and effective communication are all essential for building credibility, delivering high-quality work, and achieving success as a consultant.
How to create a Glassmorphism ui design in Figma – 2023 Modern Figma UI Tutorial
Published: 2023-01-26 23:51:40

#ui #uiux #figma #figmatutorial #tutorial #glassmorphism #modernui

How to create a Glassmorphism ui design in Figma – 2023 Modern Figma UI Tutorial.

In this video I will teach you how to create a Modern Look UI called “GLASSMORPHISM”. This is a style in UI Design that enhance the look of a UI in a glass like or transparent form. The Glass morphism is now a Trend in the UI space and you need to learn how it is done

{% embed https://youtu.be/TsXL-KtWasA %}

If you find this useful, please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via:
Instagram: @arems.dev
Facebook: @ahmed.idowu90
How to Design an interactive bottom navigation in Figma | Mobile App UI Tutorial 2023
Tags: figma, webdev, beginners
Published: 2023-01-26 23:50:12

Welcome to another episode of Figma UI Design Tutorial. In this video I’m going to show you how to design an animated bottom navigation in Figma.  Kindly Watch and Learn.

In case you face any issue, let me know in the comment section…
Please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.

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

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via :
Facebook: @ahmed.idowu90
Instagram: @arems.dev


Download useful resources by clicking this Link: https:// drive.google.com/file/d/16syhGeUn6iXYsTi4YuV0zxqb4F3Vh_EJ/view?usp=sharing
How to Design Bouncing Splash Screen Animation in Figma 2023
Published: 2023-01-26 23:48:25

In this video I’m going to show you how to design a Bouncing Splash screen Animation Effect in figma.  You might need to use this design feature in your next project. Watch and learn.


In case you face any issue, let me know in the comment section…
Please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.


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

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via :
Facebook: @ahmed.idowu90
Instagram: @arems.dev
How to create loading animation in figma - Figma Tutorial 2023
Tags: figma, uiux, product, webdev
Published: 2023-01-26 23:46:55

In this video I’m going to show you how to design a Loading Animation in figma.  You might need to use this design feature in your next project. Watch and learn.
In case you face any issue, let me know in the comment section…
Please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.

{% embed https://youtu.be/EFBETvDl-ls %}

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via :
Facebook: @ahmed.idowu90
Instagram: @arems.dev
How to design a Bills Payment App UI in Figma | Figma Tutorial 2023
Published: 2023-01-26 23:43:36

In this video I’m going to show you how to design a Bills Payment App UI in Figma.  The app make your day to day payment easy. 

Users can buy airtime, purchase internet data bundle, book a flight, pay cable subscriptions, buy concert ticket, create virtual dollar card for international shopping, pay school fees etc. Watch every step in the video and you will be able to get it done.

In case you face any issue, let me know in the comment section…

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

Please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever i upload a new video. 1Love.

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via :
Facebook: @ahmed.idowu90
Instagram: @arems.dev


Download useful resources by clicking this Link: https:// drive.google.com/file/d/16syhGeUn6iXYsTi4YuV0zxqb4F3Vh_EJ/view?usp=sharing
How to Design an interactive Dropdown Menu and Date picker Animation in Figma 2023
Tags: uiux, figma, product, designpatterns
Published: 2023-01-26 23:40:56

In this video I’m going to show you how to design an interactive Drop down menu and Date picker in Figma.  The Dropdown menu will function like a live app that will enable you select an option.

I will also teach you how to create a modern date picker that enable you select Month, Date and Year. 

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

Watch every step in the video and you will be able to get it done.
In case you face any issue, let me know in the comment section…
Please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via :
Facebook: @ahmed.idowu90
Instagram: @arems.dev
Chat App UI Design in Figma Part 2 - Figma Mobile UI Design Tutorial
Tags: uiux, figma, productdesign, webdev
Published: 2023-01-26 23:37:42

Chat App UI Design in Figma – Part 2  

This is the continuation of the last video on chat app ui design in Figma, In this video I’m going to show you how to design a start chat app UI in Figma with advance feature like Stories, Short video clips, forum, groups and modern designs.
Watch every step in the video and you will be able to design a standard chat app.
In case you face any issue, let me know in the comment section…
Please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.


{% embed https://youtu.be/WWsZhHVdi-I %}

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1


Connect with me via :
Facebook: @ahmed.idowu90
Instagram: @arems.dev




Download useful resources by clicking this Link: https:// drive.google.com/file/d/16syhGeUn6iXYsTi4YuV0zxqb4F3Vh_EJ/view?usp=sharing
Compare human and AI responses on Stackoverflow using CodeGPT
Tags: chatgpt, codegpt, gpt3, openai
Published: 2023-01-26 23:35:39

In this article I will explain how to use `Ask StackOverflow` functionality of the **Code GPT** extension.


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

**Code GPT** extension, available for **VSCode**, allows you to search for questions on **StackOverflow** and compare the best human response with the response from artificial intelligence such as **OpenAI's GPT-3**.

Official Code GPT documentation: [https://codegpt.co](https://codegpt.co)

## Install CodeGPT in VSCode
Follow the instructions below to install the extension in VSCode

[Install CodeGPT](https://www.codegpt.co/docs/tutorial-basics/installation)

## Ask StackOverflow
To activate this option you just have to press the `cmd + shift + p` keys and look for the Ask StackOverflow option

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

Now search for a question or even it can be just with a keyword, in this case, we just enter python and we can get all the queries with this concept that exist on StackOverflow

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

Select a question and Code GPT will do the magic 😍

It will show you the question, then the best answer and for the last time you will be able to see the answer of the artificial intelligence that you have selected.

In this case, we perform the test with OpenAI and the text-davinci-003 model

Example:

![gif](https://user-images.githubusercontent.com/6216945/214115661-fb0b2d49-f15c-49d1-beba-e51defdbd8e9.gif)

Human vs AI 

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

Try this tool on your own so that you have both human responses and AI responses within Visual Studio Code to improve your projects.
How to Design a Chat App UI in Figma - Mobile UI Design 2023
Tags: uiux, figma, webdev
Published: 2023-01-26 23:32:12

How to Design a Chat App UI in Figma - Mobile UI Design 2022
In this video, I’m going to show you how to design a modern chat app in Figma with advance features. 

Watch every step in the video and you will be able to design a standard chat app.

{% embed https://youtu.be/pkrN2XGW-xA %}
I will be using an old chat app as a case study (2go Chat). I will redesign the old java phone chat app with new features.
In case you face any issue, let me know in the comment section…
Please LIKE, SHARE, COMMENT & SUBSCRIBE For more videos. Also, hit on the notification bell icon to get notification whenever I upload a new video. 1Love.

Subscribe to my channel by licking this link: http://www.youtube.com/channel/UCxy5QIX22DE86tiqyekeoew?sub_confirmation=1

Connect with me via :
Facebook: @ahmed.idowu90
Instagram: @arems.dev


Download useful resources by clicking this Link: https:// drive.google.com/file/d/16syhGeUn6iXYsTi4YuV0zxqb4F3Vh_EJ/view?usp=sharing