teleren/devto huggingface dataset:
Flame Chat, a Chat App built using Firebase
Tags: javascript, webdev, beginners, programming
Published: 2022-08-08 07:46:00

Personal chat app built using React and Firebase!.

[Live Website](https://chat.khusyasy.com/)
[Source Code](https://github.com/Khusyasy/flame-chat)

> note: this is an old post (22 June 2021) from my website, posting for archiving purposes

## Features

- Person to person private chat.
- Register and Login using Google Auth.

## Objectives
Firebase is a BaaS (Backend as a Service) owned by Google that can help developers quickly develop apps. By using firebase for backend service, I can focus more on the looks and experience or known as UI/UX of the apps. I wanted to learn more about firebase, so I decided to create a Personal Chat App.

The goal of this project is:
1. Setup Firebase and Firestore.
2. Create UI/UX using React.
3. Connect Firebase with React.

### 1. Setup Firebase and Firestore.

Because this is the first time I used Firebase, I have to learn it first. Searching through Youtube and reading the documentation.

The process of creating a Firebase project is actually really simple (thanks Google), it took only a couple hours for me.

### 2. Create UI/UX using React.

I decided to try out React Bootstrap, it is just Bootstrap but for React. I am actually a little bit familiar with Bootstrap. This should be easy for me.

![ui ux of the react app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0fv5bewejsdmwyzq46k.jpg)

I also decided to use React Context for managing some of the state like user auth and messages. That is to prevent passing props too many layers down the children element.

### 3. Connect React with Firestore.

This part is basically just using React with API that is provided by Firestore. Firestore handles all CRUD function. Firestore is a NoSQl database more or less like MongoDB.

## Techonologies used

- React JS
- React Context
- React Bootstrap
- Firebase
- Firestore
- Google Auth
Speed up Promises in JavaScript
Tags: javascript, node, webdev
Published: 2022-08-08 07:44:00

Promises are an integral part of async code in JavaScript. We often come across the need to run multiple promises at a time that are independent of each other. We can achieve this by using JavaScript's `Promise.all`. `Promise.all` is a promise provided by JavaScript that accepts an array of promises and resolves when all of them get resolved. 

Suppose you've to fetch data from 3 different APIs. Each API takes around 3 seconds to respond. A normal code without concurrency would look like this:

```javascript
async function fetchData() {
  const metadata = await getMetadata(); 
  const products = await getProducts();
  const categories = await getCategories();

  return { metadata, products, categories };
}
```

The code above works fine. But can be improved by leveraging concurrency. We don't need to run them sequentially since all the three functions are independent of each other. We don't need `metadata` before `products`. We can rewrite the above code snippets like this:

```javascript
async function fetchData() {
  const metadata = getMetadata();
  const products = getProducts();
  const categories = getCategories();

  return await Promise.all([
    metadata,
    products,
    categories,
  ]);
}
```

Now we're not waiting for `metadata` before `products`. Instead, all the data gets fetched simultaneously. This technique is quite powerful and speed-up your code. This technique can also fetch the data based on a certain input. Suppose you want to fetch product details for a list of products. You can refactor your promises like this:

```javascript
async function fetchProductDetails(ids) {
  const productDetails = await Promise.all(
    ids.map(id => getProduct(id))
  );
  return productDetails;
}
```

As JavaScript is single-threaded, parallelism cannot be achieved unless you create a child process for each promise. Spawning a process is a costly operation and there are certain overheads which make it less viable. `Promise.all` is a good alternative to achieve concurrency and speed up your code. Again, it depends upon the problem you're trying to solve. What techniques do you have to speed up promises in JavaScript?
Creating a Quiz Game, Koding Kuiz
Tags: javascript, webdev, beginners, programming
Published: 2022-08-08 07:40:00

A quiz game about programming, coding, and related stuff. You can test your knowledge about the subject while having fun!.

[Live Website](https://quiz.khusyasy.com/)
[Source Code](https://github.com/Khusyasy/koding-kuiz)

> note: this is an old post (09 May 2021) from my website, posting for archiving purposes

## Features

- Quiz game with multiple categories and difficulties.
- Scoring system.
- Leaderboard system.
- GitHub OAuth integration.

## Objectives
I always wanted to create a quiz game about the stuff that i loved, that is tech and programming, and then the player can see how they rank among the other players.

So to sum it up, the goal of this project is:
1. Create a quiz game.
2. Create an account system.
3. Create a leaderboard system.

### 1. Create a quiz game.

Firstly, I make a quick quiz game prototype using a framework that I'm currently learning (Vue JS), and this prototype is gonna be the very basic requirement for my quiz game, so I can visualize what would be needed for the quiz game.

![quiz prototype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e9vdxz4n56ky3o2040r.png)

I actually wanted to create my own API for the questions, but after a while I decided to use a public API, and I found QuizApi, and I have to modify the prototype for a bit so the structure of the quiz is compatible.

I also decided to keep using Vue JS for this project.

### 2. Create an account system.

I'm using GitHub OAuth to save time and my sanity, because by using that, I don't have to deal much about account management and security, GitHub already do that better than me.

I actually never used GitHub OAuth or any Auth API before, so this is some kind of an amazing new learning experience.

### 3. Create a leaderboard system.

I created a Express JS server and configure MongoDB, and all the usual server configuration stuff, this step is pretty straight forward, that is creating an backend for database CRUD and creating API endpoint like what I usually do.

## Techonologies used

- MongoDB
- Express JS
- Vue JS
- Vuex
- Node JS
- JWT
- GitHub OAuth
Typescript WTF Moments 4: never extends `${infer P}` yield different result than never extends `${infer P}/`
Tags: programming, webdev, tutorial, typescript
Published: 2022-08-08 07:39:00

---
series: Typescript WTF Moments 
---

```ts
type a = never extends `${infer P}` ? P : 1  // never
//   ^?
type b = never extends `${infer P}/` ? P : 2 // string
//   ^?

type a1 = never extends `${infer P extends string}` ? P : 1 // never
//   ^?
type b1 = never extends `${infer P extends string}/` ? P : 2 // string
//   ^?

type a2 = never extends `${infer P extends number}` ? P : 1 // never
//   ^?
type b2 = never extends `${infer P extends number}/` ? P : 2 // number
//   ^?

type a3 = never extends `${infer P extends null}` ? P : 1 // never
//   ^?
type b3 = never extends `${infer P extends null}/` ? P : 2 // null
//   ^?

type a4 = never extends `${infer P extends undefined}` ? P : 1 // never
//   ^?
type b4 = never extends `${infer P extends undefined}/` ? P : 2 // undefined
//   ^?

type a5 = never extends `${infer P extends boolean}` ? P : 1 // never
//   ^?
type b5 = never extends `${infer P extends boolean}/` ? P : 2 // boolean
//   ^?

type a6 = never extends `${infer P extends bigint}` ? P : 1 // never
//   ^?
type b6 = never extends `${infer P extends bigint}/` ? P : 2 // bigint
//   ^?
```

[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAhlC8UB2EBuEBOUIA9gSQBMBnKAAwBIBvASyQDNMoAFAXzKgH4WoAuKAIxQoAehHI0mAFBjhUAHqcpoSFABGCCeiy58RUpVoMmbER27M+UAEyjxxYBjoBzGeOGKpy8NBhDEKNrYeAQk5NR0jFiWuqGkDk5IzuxcPPxCsoHSsh5KKtBq-lpMsfrhRlE8pWEJLqxmqZb8trK1SW5ynt6qMLYBkjohZYaRJsF6YUgArgC2apgpFlYZ4lkYHbndBX3FgxMGEcbR43HIs-MY9eZpNnZnc9nuCkpbsADMmmsnw4eVMUOTKYAGyBixuK12G2erzUH36QWqBwqY0RZxBV0aVhaq2BQKhXXysAALJ8Bt8wiMjlUAaQpkQIPQ6BBCGCmoI7mt8XkfOoSfCSjTyqNjqi6YQGUyWQ0ls07mKJShCFyvISYABWUkIwWUv7k0hqAD2BqBEBgSFZyw5A2VhLUGv5e1OOpRgsNxtN5ulN2x6iNJrNyteMAAbJqBfshVT-hG1DRnHRgBb0lbtDaeWpQw69ZHdajY-GkImvWyffmE8qgA)

this is a [bug](https://github.com/microsoft/TypeScript/issues/50215)
Sometimes you need to take a step back
Tags: development, mistakes
Published: 2022-08-08 07:37:54

---
title: Sometimes you need to take a step back
published: true
description: The story of me pulling my hair out for no reason when trying to get a MacBook Pro to run Azure Functions (hint: it was my fault 😅)
tags: development, mistakes 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xjgw6wn0dzqjcr1xpgm.png
---

Before the summer treated myself to a MacBook Pro for video creation. I didn't get around to trying it for that purpose yet, but I have used it for writing content and quite like it.

Seeing as I had it available, I thought I'd try to see what development was like on the machine.

Coming from a Windows development background to a Mac is a little overwhelming. I am going to write something on that in the future (when the book is done and dusted, and I have some free time on it).

But today... I want to go over the last thing that I was trying to get working. My Azure Static Web Apps, running using Visual Studio for Mac and the SWA CLI tool.

It was a nightmare!

No matter what I did it just would not work. The Azure Functions would fire, but would not pick up the `local.settings.json` and so couldn't access my CosmosDB container to read data.

I checked I had it in the right place, that I had formatted the JSON correctly. Checked that I had spelt the name of the file right.

Nothing.

And nothing online about MacBooks having issues Azure Functions. If there is nothing there, then it can't be a problem on the platform... Someone would have noticed by now.

Maybe a setting that people developing on these machines just know about and I was getting lost?

Hours, and hours were spent with me pulling my hair out because this **should** work, and I really want to get it working.

Today I fixed it.

The problem...?

I forgot to set the properties of the local.settings.json file when I created it and it was never being copied to the output folders. Doh!

On the bright side, it works now and I have another choice of development machine when I want to do some hobby development!
Making a Link Shortener
Tags: javascript, beginners, programming, webdev
Published: 2022-08-08 07:34:00

This is a website where you can shorten your link, and make it easier to share with your friends.

[Live Website](https://sla.khusyasy.com/)
[Source Code](https://github.com/Khusyasy/shortlink-app)

> note: this is an old post (07 March 2021) from my website, posting for archiving purposes

### Features

- Register and Login to your account.
- Shorten your link in just 1 click.
- View how many times your link has been clicked.

### Objectives

I wanted to learn the MERN Stack, so i have to combine what i have learned about React JS and Express JS, i also learn how to do CRUD with MongoDB databases using Mongoose, and using JWT for authentication.

### Techonologies used

- MongoDB
- Mongoose
- Express JS
- React JS
- React Router
- Node JS
- JWT
Blockchain Development Services Company - Brugu
Tags: blockchain, technology, crypto, blockchaindevelopment
Published: 2022-08-08 07:30:00

**What exactly is a blockchain? How does it differ from other technologies? And why should you care?**

The term “blockchain” has become ubiquitous over the last decade. From financial institutions to governments, everyone seems to want to get involved with this new technology.

Blockchains are distributed ledgers that record transactions across a network of computers. They are immutable and transparent, meaning they cannot be changed once recorded. This makes them ideal for recording ownership rights or tracking assets.

**BRUGU Blockchain Development Company**

We are a rapidly growing blockchain-centric firm. Our clients know us for delivering complex projects with utmost efficiency, exceptional quality and on time.

As companies march towards creating a new generation of secure information technology solutions for sustainable growth, we guide you through the deployment of critical infrastructure to develop decentralized industry applications, your own tokens, smart contracts, legal compliance systems and more.

**Smart Contract Development**
Our skilled team of smart contract developers help businesses develop immutable and accurate smart contracts to make your business ecosystem conflict-free. We, being a renowned blockchain application development company, have catered to industries such as real estate, retail, supply chain and gaming.

**Stable coin Development**
Bring stability into your crypto business with stable coins. As a blockchain application development company, we offer end-to-end stable coin development services, right from stable coin creation to trading environment. Our stable coin development services will give you the push you need to get best business results.

**Cryptocurrency Exchange Development**
Be it centralized, decentralized or hybrid cryptocurrency exchanges, Brugu’s top blockchain development services will help you develop solid, secure cryptocurrency exchange platforms. Besides building cryptocurrency exchanges from scratch, we also offer white label exchange development services.

**Cryptocurrency Development**
We are a blockchain development company that also develops advanced cryptocurrencies with cutting edge technology that would enable your crypto users to trade them as utility tokens or security tokens.

**Why Choose Us**
We have highly skilled engineers with excellent technical knowledge and experience of working with more than 50 Global clients.

- 5+ YEARS EXPERIENCE IN BLOCKCHAIN
- EASY CLIENT ONBOARDING PROCESS
- 90% CLIENT RETENTION (CODE STANDARDS)
- SOLUTIONS WITH UNCOMPROMISED QUALITY
- 50+ GROWING LIST OF SATISFIED CLIENTS
- A FLEXIBLE, DYNAMIC PRICING MODEL
- 75+ BLOCKCHAIN SPECIALISTS & CERTIFIED DEVELOPERS
- CUSTOMIZABLE FEATURES AND SOLUTIONS


[https://brugu.io/get-free-estimation
](https://brugu.io/get-free-estimation
)
My First Project...
Tags: firstproject, javascript, beginners
Published: 2022-08-08 07:13:31

Hi its me again! A bit of time has passed since I first enrolled into the Flatiron Software Development bootcamp about two months to be exact. Over these past two months I've felt very lost which in someway is something I hate to admit as I thought I would really understand aspects of software development such as JavaScript more quickly. With life hitting me like bus and my inability to really get a firm understanding of the fundamentals of JavaScript I've just felt lost. With this feeling of being lost I fell into a pit of despair where I felt like I didn't belong in this community, so for a while I decided to stop coding. I stopped coding for a couple of weeks drowning in sorrow every other day that I wasn't quite fit to follow this career path, that was until I got two messages. Within these two messages one from an instructor read along the lines of a due date for a big end of phase project approaching while the other message was from a classmate asking how far I was into the project. After I read these two messages I felt like I had a sudden reality check, I needed to get back into learning code and starting a project I felt like I couldn't do as I lacked the skills needed to even write the most basic lines of code. 

 For a bit I went back and forth with my partner telling her how scared I was and how I lacked any of the skills needed to make a project from the ground up, she reassured me that I could do it and that all it takes is to learn some basic fundamentals and start from a simple idea. So I did. I decided in some way I'm going to make a simple TODO List project with this short amount of time that I have. Starting the project wasn't easy as I felt like I didn't know much but all this taught me was to actually ask others for help as scary as that may feel or sound others may have the knowledge you need. In some way that knowledge can boost you and give you the confidence you need to do something you never thought you would accomplish, and that's exactly what I did, I completed my first project, a little TODO List program I'm happy for.

Through it all if you've come this far and read my short personal story I hope the one thing you could take away from this is to ask for help, asking for help will push you further than you could ever imagine. Cheesy I know but its true.

(ps If you need a little confidence boost or care to see my project here a github link to it https://github.com/JorgeCasta0207/Phase1-Project-TodoList.git) 

Thanks for sticking around and reading!
Tai Nghe Siêu Nhỏ Dạng Thẻ ATM
Tags: tainghesieunho, tainghesieunhomini, tainghesieunhohattu, tainghesieunhonguytrang
Published: 2022-08-08 07:19:20

[Tai nghe siêu nhỏ dạng thẻ ATM](https://tainghesieunho88.com/tai-nghe-sieu-nho-dang-the-atm/) , có chức năng tự nhận cuộc gọi thời gian sử lên tới 6 tiếng hình thức giống như một chiếc thẻ ATM nhỏ, mỏng, nhẹ được các Bạn sinh viên sử dụng vào mục đích thi cử, Chất lượng đàm thoại như một chiếc điện thoại bình thường.

Kich thước :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owtdctgkk7e46ewdacgu.jpg)
Thời gian sử dụng của máy lên tới 6h liên tục. Sạc đầy trong vòng 2h
Micro cực kỳ nhạy thì thầm có thể nghe thấy bán kính 10 m nghe to và rõ ràng.
Tai nghe hạt đậu sử dụng Pin 337 có thể nghe liên tục 6-8h
Kích thước 85 x 50 x 4,5 mm Nhỏ gọn  giúp bạn cất dấu một cách đơn giản.
Tự động nhận cuộc gọi
Tự động kết nối với tai nghe bằng sóng từ trường.
Hướng dẫn sử dụng tai nghe siêu nhỏ dạng ATM :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p13653q2kpzm6gwxyy8q.jpg)
Cách sử dụng cũng giống như dòng sản phẩm Tai nghe siêu nhỏ dạng ATM led 

Đầu tiên  bạn sử dụng một chiếc sim của các nhà mạng lắp sim vào má. Lắp đầu vát vào khi thấy tiếng kêu tác một cái là được.

Gạt công tắt ở phía trên máy gần khe căm sim  để máy khởi động sau 10s máy khởi động và tự nhận sim cũng giống như các dòng tai nghe siêu nhỏ cắm sim loại hộp diêm

Gắn Pin vào tai nghe siêu nhỏ với Pin 337 Phía chữ của Pin được gắn vào lắp hạt đậu.

Nhét hạt đậu vào tai sau đó bỏ chiếc máy ATM vào túi khuyến cáo để càng gần tai nghe nghe càng to và rõ không nên để xa .

Đầu dây bên kia sẽ gọi điện vào số bạn vừa lắp sim và liện lạc với nhau một cách bí mật mà không ai biết

Lưu ý khi sử dụng sử dụng tai nghe siêu nhỏ dạng ATM LED:
Để nơi khô giáo tránh nơi ẩm mốc
Pin 337 không dùng đến nên tháo ra và cất vào hộp
Kiểm tra Pin của máy trước khi sử dụng.
xem thêm sản phẩm tương tự
[Tai Nghe Siêu Nhỏ Bluetooth Hạt Đậu](https://tainghesieunho88.com/tai-nghe-sieu-nho-bluetooth-hat-dau/)
[Tai Nghe Siêu Nhỏ Dạng Hộp Diêm](https://tainghesieunho88.com/tai-nghe-sieu-nho-dang-hop-diem/)
How to integrate Laravel with Vue & Tailwind Admin One Dashboard
Tags: php, tailwindcss, laravel, webdev
Published: 2022-08-16 22:13:13

---
title: How to integrate Laravel with Vue & Tailwind Admin One Dashboard
published: true
date: 2022-08-08 07:14:46 UTC
tags: php,tailwindcss,laravel,webdevelopment
canonical_url: https://blog.devgenius.io/how-to-integrate-laravel-with-vue-tailwind-admin-one-dashboard-3753346181
---

[![](https://cdn-images-1.medium.com/max/1400/0*24FgkhEpHXMo2rNe)](https://blog.devgenius.io/how-to-integrate-laravel-with-vue-tailwind-admin-one-dashboard-3753346181?source=rss-17217f29618a------2)

Laravel creates a Vue admin panel from scratch — Part 6

[Continue reading on Dev Genius »](https://blog.devgenius.io/how-to-integrate-laravel-with-vue-tailwind-admin-one-dashboard-3753346181?source=rss-17217f29618a------2)
300. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-08-08 06:56:24

```
class Solution {
 public:
  int lengthOfLIS(vector<int>& nums) {
    if (nums.empty())
      return 0;

    // dp[i] := length of LIS ending at nums[i]
    vector<int> dp(nums.size(), 1);

    for (int i = 1; i < nums.size(); ++i)
      for (int j = 0; j < i; ++j)
        if (nums[j] < nums[i])
          dp[i] = max(dp[i], dp[j] + 1);

    return *max_element(begin(dp), end(dp));
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/longest-increasing-subsequence/
2023 Calendar Printable One Page
Tags: calendar, 2023calendar
Published: 2022-08-08 06:49:11

[2023 Calendar Printable One Page](https://sixcalendar.com/2023-calendar-printable-one-page/) makes it simple for you to organize your monthly itinerary, which may include official meetings, individual appointments, dates, and other events. The calendar accommodates all requirements and objectives by listing holidays and events with their associated dates and prescribing days and dates. Calendars are a wonderful resource for memorizing all the important dates and occasions that occur throughout the calendar year. Schedules are available in a variety of styles, including those based on the calendar year, the month, and the week. When customizing these calendars, use your creativity. Simply download each calendar provided and use it to plan events.
Gif Widget : "Markdown Meme Maker"
Tags: gif, markdown, meme, editor
Published: 2022-08-08 06:40:12

---
title: Gif Widget : "Markdown Meme Maker"
published: true
description: A tour of the Markdown Meme Maker app in gif.com.ai
tags: gif, markdown, meme, editor
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u03nos2wpt1psgysad6p.png
# Use a ratio of 100:42 for best results.
---
On [Meme Monday's](https://dev.to/ben/meme-monday-4a5d) we're all accustom to laying down our memes & markdown & famously practice our craft. These memes are usually static images but they can also be animated gif's. We decided to make a meme maker for meme monday's to celebrate this __!important__ (_*pun intended*_) holiday. We're giving this some good effort. Feel free to add to our creation with your own.

Presenting **Markdown Meme Maker :**

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5zqxsgwllqxdc3bucis.PNG">
  <figcaption>Get a live preview when writing Markdown.</figcaption>
</figure>

Markdown Meme Maker presents your markdown in a live code interface. You can visualize your markdown as you type & it also deconstructs these elements into individual pieces in the canvas so you can modify them, use widgets on them, etc.

You can write standard Markdown but you should also reference the
[Markdown docs from Showdown](https://showdownjs.com/docs/markdown-syntax/) from which the editor is based. One thing we noticed is that the shorthand emoji syntax is broken. *But* you can copy and paste the emoji symbol directly into the markdown editor and that will work. You can even play with the size of the emoji by prepending `#` before the emoji symbol. (E.g. `#😃`)

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71d7rdjb8s38kh50ftdn.png">
  <figcaption>Markdown transmits to live elements you can edit in the canvas.</figcaption>
</figure>

If you're interested in making a meme maker of your own. In a future article we will dig deeper into how we made the app. And introduce `canvas events`, a new concept that allows you to do things like adding dynamic elements to the canvas through code.

Check out the "Markdown Meme Maker" template here.

#### [Open template](https://gif.com.ai?id=QmSPJiqsHZspMUnEkndYwbJdB6vhLXxpdpypc34BtSskS1)