teleren/devto huggingface dataset:
Escape room with Three.js
Tags: threejs, javascript, gamedev, beginners
Published: 2023-08-08 13:05:00

After spending more than 2 years in web development, I've decided to lean towards game development.

A few days ago, I was struggling to come up with any project ideas. Then I realised I wanted to try making something different and decided to make an escape room.

I immediately started learning Three.js, so I could make a 3d escape room. Then, I designed all 4 rooms in the escape room, making it as fun as possible.

Now, I've almost finished designing the first room.

This is what the front of the room looks like:
![room front](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug21zasgqzjaxy9k9eqc.png)

---

I'm looking for people to help test the escape room.
If you are interested, please DM me on [Twitter](https://twitter.com/VulcanWM) or email me @ vulcanwmemail@gmail.com
Integrating Google Login System in React
Published: 2023-08-08 13:00:52

Integrating third-party authentication systems, like Google's OAuth, into a React app can streamline the user registration and login process. In this guide, we'll walk through the steps to implement Google Login in a React application.

## Prerequisites:
- 
A React application set up. 
- 
A Google Developers Console account.

## Step-by-Step Guide:

### 1. Setting Up Google OAuth2.0:

- Go to the Google Developers Console.
- Create a new project.
- Navigate to "Credentials" and click on "Create Credentials" -> "OAuth 2.0 Client ID".
- Choose "Web application". You'll be prompted to set up your OAuth 2.0 credentials. Make sure you specify the correct redirect URIs.
- Once done, note down the Client ID.

### 2. Setting Up the React App:

- Installing Necessary Packages:

```
npm install @react-oauth/google axios
```

### 3. Implementing Google Login:
Follow the React code example provided earlier in our discussion, which demonstrates how to:
- Use the useGoogleLogin hook for Google authentication.
- Save the user's authentication status in localStorage to - persist their login state even after a page refresh.
- Fetch the user's profile using their access token.
- Provide a logout functionality using googleLogout.

## Security Considerations:

- While the clientId is public and is used in the frontend, ensure you never expose any sensitive information like the secret key.
- In a production app, consider handling authentication and session management on the server-side, passing only necessary non-sensitive data to the client.

## Conclusion:
Implementing Google Login in a React application enhances the user experience by offering a quick and familiar way to sign in. This guide provides a straightforward method to achieve this. Always ensure you handle user data with care, respect privacy, and maintain the security of your applications.
Thiết lập user.name, user.email cho riêng 1 repo / global
Tags: git
Published: 2023-08-08 09:42:42

`git` cũng giống như các ứng dụng nguồn gốc UNIX/LINUX khác, hỗ trợ rất nhiều `config value`, 2 trong số đó là `user.name` và `user.email`, 2 field này giúp "ghi dấu" tên tác giả của commit tương ứng. 

khi cài đặt `git` lần đầu tiên, git sẽ lấy thông tin `username` & `hostname` của hệ thống để set vào `user.name` và `user.email`, điều này để đảm bảo rằng mỗi `commit` luôn luôn dc "đánh dấu tác giả" đầy đủ. 

vấn đề là khi đó lịch sử nó sẽ chứa các tên "không chuyên nghiệp" như thế này

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

với các dự án nguồn mở thì không sao, ghi dấu ấn cá nhân cũng tốt, nhưng với dự án của doanh nghiệp, thì không nên. 

vậy nên, nếu bạn dùng laptop/PC công ty để làm việc, vui lòng thiết lập lại `user.name` và `user.email` ở cấp độ `global` 

```bash 
$ git config --global user.name "{WORK_ACCOUNT}"
$ git config --global user.email "{WORK_EMAIL}"

# ví dụ 

$ git config --global user.name "longnx"
$ git config --global user.email "longnx@example.com"

```

nếu dùng laptop cá nhân, hoặc cùng lúc làm cho nhiều công ty khác nhau thì có thể setting nó ở cấp độ `local` bằng việc **không** sử dụng cờ `--global` 

```bash 
$ git config user.name "{WORK_ACCOUNT}"
$ git config user.email "{WORK_EMAIL}"

# ví dụ 

$ git config user.name "longnx"
$ git config user.email "longnx@contoso.com"

```

## Thông tin thêm 
Trong git, có 3 cấp độ `config value` theo thứ tự ưu tiên là `local` >  `global` > `system`, chi tiết có thể tìm hiểu thêm [ở đây](https://stackoverflow.com/a/66108560).
Rubyist Hangout Thread
Tags: discuss, ruby, watercooler
Published: 2023-08-08 13:00:00

Hey folks, this is a weekly hangout thread.

This is an area for **Rubyists to discuss _Ruby_**, but since Ruby is 28 years old, and things don't change so quickly, this is also just **a hangout thread for Rubyists to share whatever you feel like** within our community guidelines.

So what's up this week?
How to use AppUploader to create a provisioning profile
Published: 2023-08-08 12:43:33


Step 1: Profile Management ​Description file type explanation: The ones with "app store" are release types, and the ones with "development" are development types. Push does not have a description file, so do not ask which description file type to choose for push. IOS development chooses the "IOS App Development" type, and choose the "app store" type when publishing the app. Before making the description file, we first add a test device. ​Click on the "Profile Management" on the homepage.
 Step 2: Create a New Profile ​Go to the profile page and click "New Profile". Then enter a name for the profile. The character and number of the name should be easy to recognize. Then select the profile type and choose the bundle ID. If there is no bundle ID, you can click the "Add Bundle" button in the pop-up box below. ​Bundle ID explanation: The bundle ID is also called the app ID. The app is bound to the description file, not the certificate, so each app has a separate description file, but many apps can share one certificate. ​Finally, add a test device. If there is no test device, you can click the "Add Test Device" button in the pop-up box below. Follow the prompts to add it. ​Test device explanation: If the selected type is "IOS App Development", then all test devices must have the device selected and checked. If the test device does not appear, click "Add Test Device" and enter the UDID of the iOS device connected to the current PC. It will automatically obtain the UDID of the device. If the app cannot be installed on the device after compilation, it may be because the UDID of the device has not been added to the description file, and it needs to be recompiled after adding the description file. ​ If all certificates appear to be empty for any reason, there are three possible reasons: ​ Development certificate explanation: 
1.No certificate was made. You need to go to Certificate Management to make a certificate. 
2.The current type of profile does not have the corresponding certificate. You need to change the profile or create a certificate for the current profile type. 
3. The certificate is a push type and does not need to have a description file. ​ After completing the profile, click "Download" to save it on your desktop. ​Congratulations! Both the certificate and profile have been created and saved successfully.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrf7yfvid8sz4qja5vhl.png)
Show bottom sheet from behind the tab bar SwiftUI iOS
Published: 2023-08-08 12:43:13



I have to add a bottom sheet like the attached image, But I want my bottom sheet to be coming in from behind the tab bar and not top.

How can I achieve this, I have tried sheet modifier and overlay modifier but nothing seems to work
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nvc5o8mgwsp9n4nqvsk.png)
How to use AppUploader to create an Apple certificate?
Published: 2023-08-08 12:36:42

How to use AppUploader to create an Apple certificate?
Step 1: Certificate ManagementClick on the "Certificate Management" on the homepage.
Step 2: Create a New CertificateClick on "Add" to create a new certificate file. A free account can only be used for 7 days and does not have automatic message functionality. The automatically generated certificate is used to configure active websites and cannot be used for Apple login, payment, or active functions. The red circle marks the Development certificate, while the Distribution certificate is used for publishing and management, which can only be accessed by paying the annual fee of 99 USD to Apple.
Step 3: Use AppUploader Service to Sync the CertificateIf you select "Use AppUploader Service to Sync the Certificate," you will be able to download and use this certificate on different computers. You can also upload the IPA file to the App Store for Apple's review without the need for a Mac computer or XCode. It is very convenient and simple.After the new certificate is completed, save it to your desired location. The certificate is already created in the .p12 format and ready for use.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5mopixkowu4ohkc6iyv.png)
hCAPTCHA Solver: Auto Captcha Bypass
Tags: captcha, bypasscaptcha, 2captcha, webdev
Published: 2023-08-08 12:26:46


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10r0a33ullyaub55ft34.jpg)
[https://chrome.google.com/webstore/detail/hcaptcha-solver-auto-capt/imgmoeegfjhhmljmphfkjeibkiffcdgl](https://share.kz/ghAB)

The hCAPTCHA Solver: Auto Captcha Bypass is a browser extension available on the Chrome Web Store. This extension is designed to automatically solve hCAPTCHA challenges found on web pages. It assists users in solving difficult captchas, making it easier to access websites without the need for manual input.

**Key features of the hCAPTCHA Solver extension include:**
1. Automatic Captcha Solving: The extension automatically detects and solves hCAPTCHA challenges on web pages, eliminating the need for users to manually enter the captcha.

2. Universal Compatibility: The extension is designed to work with various types of hCAPTCHA challenges, ensuring compatibility across different websites.

3. API Key Requirement: To use the extension, users need to create an account on the solving service and obtain an API key. This key is required for the extension to function properly.

4. Cost-effective Solution: The extension offers a cost-effective solution for captcha solving, with a price of $0.03 cents per bypass. Users are only charged for successfully solved captchas.

5. Wide Range of Supported Captchas: In addition to hCAPTCHA, the extension can also bypass other types of captchas, including simple captchas, reCAPTCHA V2/V2 Invisible/V3/Enterprise, GeeTest, Arkose Labs Captcha, FunCaptcha, Lemin, Capy Puzzle Captcha, Yandex Smart Captcha, Cloudflare Turnstile, and Amazon AWS WAF Captcha.

The hCAPTCHA Solver: Auto Captcha Bypass extension is a valuable tool for users who encounter hCAPTCHA challenges and want to streamline their browsing experience. By automating the captcha solving process, the extension saves time and effort, allowing users to access websites more efficiently.

Please note that the extension requires an API key from the [2Captcha](https://2captcha.com/) service and is specifically designed for hCAPTCHA challenges. For other types of captchas, alternative solutions or extensions may be required.
Exploring the Power of TypeScript's Pick Generic Type
Tags: typescript, codenewbie, webdev, motivation
Published: 2023-08-08 12:24:37

## Introduction
In the realm of TypeScript, there are tools and features that make it a developer's best friend. One such feature is the Pick generic type, a seemingly simple yet incredibly powerful tool that can streamline your code and enhance your development experience.

## Unpacking the Pick Generic Type

At its core, the Pick generic type in TypeScript allows you to extract a subset of properties from an existing type, creating a new type that contains only those selected properties. This can be a game-changer when you're working with complex data structures and want to focus only on the relevant information.

```
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};
```

- T: The base type from which you're picking properties.

- K extends keyof T: The set of keys you want to pick, constrained to be keys of the base type T.

- [P in K]: T[P]: A mapped type that iterates over the keys in K and extracts the corresponding property type from the base type T.

## Real-world Application

Imagine you have a data structure like an interface or a type, and you only need a few specific properties for a certain use case. Instead of working with the entire object, you can use the Pick generic type to create a new type tailored to your needs.

For instance, consider a Person interface:

```
interface Person {
  name: string;
  age: number;
  address: string;
}

```
If you only need the name and age properties for a particular task, you can use the Pick type like this:

```
type PersonNameAndAge = Pick<Person, "name" | "age">;

const person: PersonNameAndAge = {
  name: "Alice",
  age: 30,
  // address: This property is not needed here
};

```
_By selecting only what's needed, we create cleaner and more maintainable code that reflects the exact data requirements of each use case._
How to Find Right IT Staff Augmentation Company
Tags: webdev, itstaffaugmentation, outsourcing, aptagontechnologies
Published: 2023-08-08 12:06:36

## **Introduction:**
As businesses grow and evolve, their IT needs often change. This can lead to a number of challenges, such as a lack of qualified IT staff or a need for temporary resources to handle spikes in demand. IT staff augmentation can be a solution to these challenges.

IT staff augmentation is the process of hiring a third-party company to provide temporary or permanent IT staff. This can be a great way to supplement your existing IT team or to bring in new skills and expertise.

How to Find the Right IT Staff Augmentation Company:
There are a few things to keep in mind when looking for an IT staff augmentation company. First, you need to make sure that the company has the right skills and experience for your needs. You also need to make sure that the company is a good fit for your culture.

Here are some tips on how to find the right IT staff augmentation company:

**- Do your research:** There are much IT staff augmentation companies out there, so it’s important to do your research and compare different companies.
**- Ask for referrals:** If you know anyone who has used an IT staff augmentation company, ask them for their recommendations.
**- Get quotes:** Get quotes from several different companies so that you can compare prices and services.
**- Meet with the company:** Once you’ve narrowed down your choices, meet with the company to see if they’re a good fit for your needs.

Aptagon Technologies is a leading IT staff augmentation company in the region. The company has a team of experienced IT professionals who can provide a wide range of services. Aptagon Technologies is a great choice for businesses of all sizes.
**_[By: Aptagon Technologies](https://aptagon.com/)_**

Conclusion:

Finding the right IT staff augmentation company can be a challenge, but it’s important to do your research and compare different companies. By following the tips in this blog post, you can find the right company for your needs.
What is the Difference Between Root User and IAM User(Identity and Access Management) in EC2
Published: 2023-08-08 12:06:24

In Amazon Web Services (AWS), both the root user(oga kpatakpata) and IAM (Identity and Access Management) users play critical roles in managing resources, but they have distinct purposes and levels of access. Here's the difference between the root user and IAM users in the context of Amazon EC2:

Root User:

The root user is the initial administrative user that is created when you sign up for an AWS account.
The root user has full, unrestricted access to all resources and services within the AWS account. This includes the ability to create, modify, and delete any resources, including EC2 instances, S3 buckets, IAM users, etc.
Due to the extensive permissions of the root user, it's generally recommended to avoid using the root user for routine tasks or day-to-day activities.
The root user's credentials should be kept highly secure, and their usage should be limited to specific administrative tasks, such as setting up IAM users and roles.
IAM Users:

IAM users are separate identities that you can create within your AWS account. Each IAM user has its own set of credentials (access key ID and secret access key) and permissions.
IAM users allow you to assign fine-grained permissions to individuals or groups of users. This follows the principle of least privilege, where users are only granted the permissions necessary for their specific tasks.
Unlike the root user, IAM users do not have unlimited access by default. Instead, they need to be explicitly granted permissions to perform actions on specific AWS resources.
IAM users can be organized into groups, which makes managing permissions more efficient. Instead of assigning permissions to each user individually, you can assign permissions to a group, and all users within that group inherit those permissions.
IAM users are a best practice for managing security and access control. They provide an additional layer of security by allowing you to manage and monitor who can access your resources and what actions they can perform.
In a nutshell, the key difference between the root user and IAM users in the context of Amazon EC2 has to do with the level of access and control they have. The root user has unrestricted access to all resources, while IAM users allow for controlled, fine-grained access management that aligns with security best practices. It's recommended to use IAM users for everyday tasks and administrative activities, and to restrict the usage of the root user to essential account management tasks.
From Pixels to Prosperity: Mobilizing Business Growth Through Apps
Tags: mobile, appsync, webdev, business
Published: 2023-08-08 12:05:13

As a tech leader, I've witnessed the remarkable journey from mere pixels on a screen to tangible business prosperity. In an age where technology threads through every facet of our lives, the strategic integration of mobile apps has emerged as a game-changer in the business landscape.

## **Picture this:**
 An entrepreneur with a brilliant idea, a dedicated team, and an ambition to transform their industry. Imagine that idea brought to life through an app – a virtual gateway connecting them to their target audience. This scenario, once confined to the realms of imagination, is now a tangible reality reshaping businesses across the globe.

## Why has this transformation been so profound? 
It's the fusion of innovation and accessibility that lies at the heart of mobile apps. Today, they're not just applications but avenues of growth and prosperity. These apps serve as personalized touchpoints that bridge the gap between businesses and their customers while propelling operational efficiency to new heights.

What truly excites me is the personal touch businesses can infuse into their apps. Each line of code, each pixel perfected, reflects their unique vision and values. This individuality, coupled with our technological expertise, forms a potent concoction that drives engagement, customer loyalty, and growth.

## Remember the days when 'customer experience' was merely a buzzword?
 With apps, it's a reality we can meticulously craft. Businesses can curate experiences that meet and exceed customer expectations, from seamless user interfaces to interactive features. The personalization and convenience offered by apps keep customers coming back, translating into a steady rise in the bottom line.

But it's not just about serving the end-users; it's also about streamlining internal operations. I've seen businesses revolutionize their workflows through custom apps tailored to their needs. These apps eliminate bottlenecks, empower employees, and enhance productivity – a transformation that echoes from the office floor to the balance sheets.

In the rapidly evolving landscape, an [app](https://www.technbrains.com/) isn't just a tool; it's a strategy. It's a statement that your business is ready to adapt, innovate, and cater to the evolving demands of the digital age. It's a commitment to growth and prosperity, a proclamation that you're not just following trends but setting them.

## As I reflect on the journey from pixels to prosperity
I'm reminded that it's not just about developing apps; it's about shaping success stories. It's about turning ambitions into achievements and ideas into impactful solutions. It's a journey that's not just ours but shared with every business that dares to embrace the power of apps.
Reset centOS root password
Tags: tutorial, linux, security, centos
Published: 2023-08-08 11:40:12

Today, in this guide, we are going to show you how to reset CentOS root password if you forgot it.

If you like this or any other article, we would appreciate a Like & Comment! :heart:

---

Please note that you assume all responsibility for this - if unexpected problems arise, which is very unlikely, then you assume liability.

First of all we need to start CentOS.

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

Here we see that it will boot soon.

But before that happens, you need to prevent this by pressing any key on the keyboard.

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

Now it should look something like this. It is also possible that several entries exist. But that doesn't matter; here you simply have to select the first one by pressing the “a” key on your keyboard.

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

Now let's edit the kernel by adding a "1" after "quiet" after a space. As you can see in the picture this has already been done.

Now you need to press the Enter key and wait for the device to start booting. When it has booted then you have to

`passwd`
type in and you can change your password.

If you have any questions, we would ask you to just write them in the comments!

Thanks,
Schächner

---

All images are from an external source