teleren/devto huggingface dataset:
Linode + DEV Hackathon
Tags: linodehackathon
Published: 2023-02-02 14:29:10

## What I built


### Category Submission:


### App Link


### Screenshots


### Description
 

### Link to Source Code


### Permissive License


## Background
(What made you decide to build this particular app? What inspired you?)


### How I built it
(How did you utilize Linode? Did you learn something new along the way? Pick up a new skill?)


### Additional Resources/Info
How I solved Firebase Auth/unauthorized domain. Domain is not authorized error problem using the Vite development tool
Tags: webdev, vite, react, firebase
Published: 2023-02-02 14:21:31

If you enjoy this topic, you will probably like my articles, tweets, and stuff. If you're wondering, check out my YouTube channel and don't forget to subscribe and follow since I'm offering programming and motivating tools and information to help you achieve your dreams.

Firebase Authentication is a powerful tool for adding user authentication to web apps, but it can be tricky to set up. One common issue that developers encounter is the "unauthorized domain" error, which indicates that the domain you are trying to use Firebase Authentication on is not authorized in the Firebase project's settings.

If you are using Vite as a development server for your project, there are a few additional things to check when encountering the "unauthorized domain" error:

First, verify that your project's development server is correctly configured to proxy requests to the Firebase server. This is typically done in the vite.config.js file, where you may need to specify the proxy URL for your Firebase project.

Next, make sure that your Firebase project's settings allow requests from `http://localhost or http://127.0.0.1,` as these are the default addresses used by Vite's development server.

Additionally, check if you are using any plugin or package that may be conflicting with Firebase.

Also, make sure that the Firebase SDK is correctly imported and initialized in your code.

If you have already added your domain in the OAuth redirect domains in the Firebase project's settings, double-check that you have entered the correct domain name in the Firebase project's settings and also that your web app is correctly configured to use Firebase Authentication.

In summary, when encountering the "unauthorized domain" error while using Firebase Authentication in a Vite-based project, it's important to check your development server's proxy configuration, ensure that your Firebase project's settings allow requests from the correct domains, and verify that the Firebase SDK is correctly imported and initialized in your code.

Another important step to troubleshoot the "unauthorized domain" error is to double-check that your domain is added to the list of authorized domains in the Firebase project's Authentication settings. Here's how to do it:

* Go to the Firebase console for your project.

* In the left sidebar, click on the "Authentication" option.

* Click on the "Sign-in Method" tab.

* Scroll down to the "Authorized domains" section and add your domain.

* Save the changes.

Whenever you want to run the development server/terminal, make sure you use 

```
`npm run dev -- --host or npm run start -- --host`
```

If you enjoy this topic, you will probably like my articles, tweets, and stuff. If you're wondering, check out my YouTube channel and don't forget to subscribe [link](https://www.youtube.com/channel/UCJQmbtiMOaWro6ZCstnkhkg) and follow since I'm offering programming and motivating tools and information to help you achieve your dreams.


noibisjunior22@gmail.com
Summary of THE CASE FOR DEPTH IN CYBERSECURITY EDUCATION
Published: 2023-02-02 14:08:03

the People’s Liberation Army (PLA) of China has developed a
cadre of 30,000 cyberspies, who are supplemented by more than
150,000 “private sector” cyberexperts “whose mission is to steal American military and technological secrets and cause mischief in government and financial services”. 

There are numerous examples in addition to literature support for the notion that cybersecurity education needs to refocus on depth as opposed to breadth. However, adding some elements of depth to the current model
of teaching cybersecurity is inadequate. We need to begin developing and measuring cybersecurity skills well before college to develop cybersecurity experts.

# HOW DEPTH IS ACHIEVED TODAY
## The Case for Depth in Cybersecurity Education
examples of a few people who started cybersecurity very early in life.

# EXPANDING DEPTH TO MEET CURRENT NEEDS
tells how much hour of work needs to be done in order to get to the 1000 hrs time goal

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

tells about various competitions held for high schoolers to get started with hacking.
- CyberFoundations
- CyberPatriot
- National Collegiate Cyber Defense Competition
- National Cyber League
- DC3 Forensics Challenge

# ANALOGY
compares the cyber security with sports and says how every day practise results in good professionals.

# INTEGRATING EXTRACURRICULAR AND CURRICULAR DEPTH IN CYBERSECURITY
Turning cybersecurity into a team competition sport has advantages of learning through real-world simulations with the ability to track performance. 

# THE NIST CYBERSECURITY WORKFORCE FRAMEWORK


# DEPTH AND BREADTH IN CURRICULAR AND EXTRACURRICULAR DEVELOPMENT
Schwartz et al. studied more than 8,000 students at 45
universities and found compelling evidence demonstrating that
students whose high school science courses focused on depth as opposed to breadth outperformed the students whose preparation was breadth-oriented.
The selected articles
ranged in dates from 1961 to 2012 and two underlying messages
were consistent throughout, namely the fact that teachers and
some students prefer breadth but external measures indicate that depth has greater value.

# DEPTH AND ITS IMPLICATIONS FOR SELF-EFFICACY
self-efficacy, a person’s belief in his or her ability to execute a task at a required level of performance, is an important factor affecting one’s ability to attain a goal. High self-efficacy also encourages increased attention and effort on a task, increased persistence when facing obstacles or adverse experiences and heightened performance accomplishment.

# CONCLUSION
Understanding the useRef hook
Published: 2023-02-02 14:07:31

The useRef hook is one of the many hooks that React provides to allow developers to manage state and side effects in their applications. In this article, we will explore the useRef hook, its use cases, and how to implement it in a React application.

What is the useRef Hook?

The useRef hook creates a reference to an element in the DOM (Document Object Model). It returns an object that has a property called “current” which holds the reference to the element. The “current” property is mutable, meaning it can be updated with a new value whenever needed. The useRef hook provides a way to access and manipulate the DOM elements without triggering a re-render of the component.

Use Cases of the useRef Hook

Accessing DOM Elements: The useRef hook is used to access elements in the DOM directly, without using the state or props. This can be useful for creating animations, handling focus, or measuring elements.

Improving Performance: The useRef hook can be used to improve performance by preventing unnecessary re-renders of a component. For instance, if a component’s value only needs to be updated once, the useRef hook can be used to store the value, and the component will only re-render when the value changes.

How to use the useRef Hook

The useRef hook is used inside a component and is called just like any other hook. The hook returns an object with a “current” property which holds the reference to the element. Here is an example of using the useRef hook to access an input element:

```
import React, { useRef } from 'react';

function InputExample() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}
```

In this example, the useRef hook is used to create a reference to the input element. The reference is passed to the input element as a ref prop. The handleClick function is then used to focus the input element when the button is clicked.

Conclusion

The useRef hook is a powerful tool that allows developers to access and manipulate the DOM elements in a React component. With its ability to improve performance by avoiding unnecessary re-renders, the useRef hook is a must-have in any React developer’s toolkit. Whether you need to access elements for animations or just for simple focus management, the useRef hook is the way to go.

Linkedin: https://www.linkedin.com/in/hastings-kondwani-9b5a92200/
Github: https://github.com/ThatMWCoder
The tool that revolutionized my workflow. My experience with Vite
Tags: webdev, productivity, opensource, vite
Published: 2023-02-02 14:00:00

In my previous post, I shared my [experience with TSED](https://blog.emilienleroy.fr/the-framework-that-revolutionized-my-workflow). Today, I want to talk about a tool that has greatly increased my workflow: [ViteJS](https://vitejs.dev/). For those unfamiliar, ViteJS is a web application development build tool created by [Evan You](https://github.com/yyx990803) and his team.

Before discussing ViteJS, I want to mention the previous build tool I used, Webpack. Webpack has a prominent place in web development and I used it on several projects over the years (and still use it on some legacy projects). However, it is slower than ViteJS due to its bundling process at each change. Even with a cache system, it still lags behind Vite in terms of speed.

I adopted ViteJS early on ([even before its v1.0.0 release](https://github.com/EmilienLeroy/labs/blob/494f185f26aa34251f27deeebd69d434aa19a4ee/todo-vue3/package.json)) and it has been one of the most incredible experiences in my developer life. Webpack used to take over 30 seconds to update even small changes, but with ViteJS, these updates take less than a second, just the time it takes to switch to the browser. Speed is one of ViteJS's biggest advantages. This is achieved by not bundling the app during development, but instead using the module script tag to improve module dependencies, which are all served as HTTP endpoints. For the build, Rollup is used to create the final bundle.

Another key advantage over Webpack is its simple configuration. No complicated setup is required. I can't count the number of hours I spent configuring Webpack, but it was a frustrating experience. Vite supports popular web frameworks with official plugins and has a large collection of plugins maintained by the community. It works seamlessly. I even created a [plugin](https://github.com/Kamiapp-fr/vite-plugin-cem) for Vite, a simple one for generating a custom-element.json manifest for web components.

```ts
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
}
```

> For example, it's super easy to configure a vue app using vitejs. 

As someone who has used both ViteJS and Webpack, I can attest to the superiority of ViteJS in many ways. Its lightning-fast update speeds and effortless configuration make it a joy to work with, compared to the headaches of configuring Webpack. The support for popular web frameworks and the wealth of community-maintained plugins only add to its appeal. I have even created a plugin myself, which further highlights the ease of customization. I highly recommend ViteJS to any web developer seeking a hassle-free and efficient build tool.
Twitter charging for API usage starting Feb. 9th
Tags: twitter, api, discuss
Published: 2023-02-02 13:59:09

Twitter as of February 9th will start charging developers to use their API.

{%embed https://twitter.com/twitterdev/status/1621026986784337922 %}

{% embed https://techcrunch.com/2023/02/01/twitter-to-end-free-access-to-its-api/?tpcc=tcplustwitter %}

Chime in with your thoughts on this.
Let’s Get Start Playwright For Component Testing
Tags: playwright, testing, react, opensource
Published: 2023-02-02 13:53:57

In the software development life cycle (SDLC), early defect detection can reduce development time and costs. Component testing is essential for the early discovery of bugs and for enhancing the quality of the code used in software testing.

Playwright can be used for component testing. It provides a way to automate testing of individual components of a web application in a real browser environment.


Please find the detail under the [link](https://qaautomationlabs.com/lets-get-start-playwright-for-component-testing/)

This blog explained :
1. How you can Set up the React component
2. How you can test React component with the help of Playwright
Getting started with Metal APIs— with UIView and SwiftUI
Tags: ios, swift, swiftui, mobile
Published: 2023-02-02 13:52:08

**Metal** is a powerful and low-level framework for graphics and computer programming on Apple platforms. It allows you to take full advantage of the performance of the **GPU (Graphics Processing Unit)** in order to perform complex computations and rendering tasks.


One of the main use cases for Metal is **image processing**, as it allows you to perform operations on images and videos in **real time** with high performance and low overhead.


In this blog post, we will dive into the world of Metal by **drawing a triangle.**


We will cover the basics of Metal programming, including the main concepts and terminology. Plus steps for setting up your development environment.


Blog outline:

- Setting up your environment
- Understanding Metal Shaders usage
  - Brief Intro about Creating and Using Shaders in Metal
  - Understanding Pipelines and State
- Use Metal in a ViewController
  - Setting up the initial view
  - Setting up a Metal view
  - Creating a Metal layer
  - Create a vertex buffer
  - Creating a render pipeline state
  - Rendering the Triangle
- Use Metal in SwiftUI
- Conclusion


By the end of this blog, you should have a solid understanding of how to use Metal to create simple 3D graphics, and be ready to take on more advanced Metal projects. We will end up creating an app that draws this triangle.


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


For implementation details, check out [canopas blog](https://blog.canopas.com/how-to-get-started-with-metal-apis-with-uiview-and-swiftui-124643d8209e).
How to deploy a static website on Amazon S3 with Route 53
Tags: aws, beginners, route53, s3
Published: 2023-02-02 13:51:26

We will be launching a static website on Amazon S3 and routing it using Route 53

**Design**

![Deploy a static website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rx3o0jh6evyhem64ygr7.jpeg)

## What do we need
- An S3 bucket
- A domain name (Purchase from Amazon Route 53)

## What to do
- Create/Purchase a domain name using Amazon Route 53
- Create an S3 bucket
- Upload your website to your S3 bucket
- Enable static webste hosting on S3
- Attach a bucket policy
- Direct your domin to the S3 bucket


## Steps to follow
1. Create/Purchase a domain name using Amazon Route 53
 Open AWS Console and Navigate to Amazon Route 53 dashboard

![Amazon Route 53 Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62h3i5e55f574c3lztwa.png)

2. Click on Register Domain
3. Search if your Domain is available and add it to your cart
4. Enter your details and accept the terms and conditions
*Don't forget to disable automatic renewal

2. 

## Create an S3 bucket
1. Navigate to Amazon S3 dashboard and Create a bucket

![Amazon S3 Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5njlxxx3cvyr39zxjdl.png)

2. Use your domain name as the bucket name
3. Choose a region closest to you
4. Uncheck BLOCK PUBLIC ACCESS (so that the public can access it)
5. Acknowledge the warning and leave others as defaults
6. Click on create bucket
7. Once it's done, click your bucket and select upload


## Upload your website to your S3 bucket
1. Click on Add files (Add from your computer) 

![Upload to S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h10g7j6w2ttqpr4n2819.png)

2. Select upload


## Enable static website hosting on S3
1. On the tab, Click on properties
2. Scroll down and select STATIC WEBSITE HOSTING

![Enable static webhost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0aqzx2gn2yn90omh0px8.png)

3. Change it to ENABLE and also change the index document (to your file name)
4. Click SAVE CHANGES


## Attach a bucket policy
1. On the tab, click on PERMISSIONS
2. Click edit and write a bucket policy

![Add a policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwtrc3l7x4pzvafvhgxo.png)

3. Click save changes


## Direct your domain to the S3 bucket
1. Navigate to Route 53 dashboard
2. Click on hosted zone

![Direct your domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55kjumvv9d94sb2d4kpc.png)

3. Click on your domain name
4. Click on create record and choose a simple routing policy
5. Click next
6. Click on Define simple record
7. For the VALUE, type **Alias to S3 website endpoint**
8. Choose the same region you host your bucket
9. Select the S3 endpoint
10. Set 'Evaluate target health' to NO
11. Click Define simple record
12. Create record and wait for few minute to reload your website


**To watch a step-bystep video**
Click [HERE](https://youtu.be/od7ls1-l4Mw)
Top PHP Frameworks for Agile Application Development in 2023
Tags: php, phpdevelope
Published: 2023-02-02 13:48:11

The web development industry saw a major massive revolution in PHP. Websites making more dynamic and user-friendly as a result. Though the language was really good, there was always an improvement in the community as more experienced PHP developers consistently took the lead. 

**What are PHP Frameworks, and Why Use Them?**
PHP frameworks are ready-to-use code bundles and packages that can be used to expand the possibilities for PHP programs, just like frameworks in any other programming language. Frameworks make it unnecessary to start from scratch and speed up the creation of apps. As frameworks are built on better coding practices, the code that you write on top of that will surely follow best coding practices, and maintaining it becomes easier. 

After learning about PHP frameworks and their benefits, let's explain some of the best PHP frameworks for developing agile applications in 2023.

1. Laravel
2. Symfony
3. CodeIgniter
4. Yii
5. Laminas

The development process is streamlined and your effort is reduced when you use a PHP framework. Each framework differs in terms of community, documentation, and the databases it supports, and each has its own unique mix of benefits and drawbacks. [This article](https://searchngr.com/top-php-frameworks-for-agile-application-development-in-2023/) will help you to get all information about the PHP frameworks.
How to differentiate between deep and shallow copies in JavaScript?
Published: 2023-02-02 13:41:07

Shallow and deep cloning are two techniques in JavaScript for creating a new object that is a copy of an existing object.

Shallow cloning creates a new object with a reference to the same object properties as the original object. This means that if you modify a property in the new object, the original object's property will also be changed.

Deep cloning creates a completely separate copy of an object, including all of its properties and any nested objects. Modifying properties in the new object will not affect the original object.


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

conclusion:
In general, shallow cloning is faster than deep cloning and is sufficient for most simple use cases, but if you need to modify properties of the new object without affecting the original object, you need to use deep cloning.
Google OAuth2 using POSTMAN
Tags: postman, api, googlecloud, oauth2
Published: 2023-02-02 13:32:59

Found the following answer from StackOverflow and tried it out. Works 100%.


- Create the OAuth 2.0 Client
Visit https://console.cloud.google.com/apis/credentials

- Click on CREATE CREDENTIALS

- Select OAuth client ID
- For Application Type choose Web Application

- Add a name
- Add following URI for Authorized redirect URIs
https://oauth.pstmn.io/v1/callback

- Click Save
- Click on the OAuth client you just generated
- In the Topbar click on DOWNLOAD JSON and save the file somewhere 
on your machine.

- We will use the file later to authenticate Postman.

- Authorize Postman via OAuth 2.0 Client
- In the Auth tab under TYPE choose OAuth 2.0
For values under Configuration Options enter the values found inside the client_secret_[YourClientID].json file we downloaded in step 9

- Click on Get New Access Token
Make sure your settings are as follows:


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

(In addition, multiple scope can be as follows, space-delimited: "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile")

Scope names to be found from below:
https://developers.google.com/identity/protocols/oauth2/scopes

- Click on Request Token
A new browser tab/window will open
Once the browser tab opens, login via the appropriate Google account

- Accept the consent screen
Done
Ignore the browser message "Not safe" etc. This will be shown until your app has been screened by Google officials. In this case it will always be shown since Postman is the app.



After  accepting consent screen pass the access token as Bearer <token> in Authorization tab in postman

Google also provides a GUI for OAuth2 authentication:
https://developers.google.com/oauthplayground/

Google's web server implementaion documentation for OAuth2:
https://developers.google.com/identity/protocols/oauth2/web-server