teleren/devto huggingface dataset:
Integrating Custom Fonts Using CSS Modules in Next.js
Tags: nextjs, css, webdev, fonts
Published: 2024-06-29 10:00:21


At [itselftools.com](https://itselftools.com), we’ve amassed a wealth of knowledge from developing over 30 projects combining the robust capabilities of Next.js and Firebase. In this article, we’ll demonstrate how to effectively integrate custom fonts into your Next.js applications using CSS Modules, enhancing the visual richness and user experience of your sites.

## What are CSS Modules?
Before we dive into the nuts and bolts, let's briefly touch on CSS Modules. CSS Modules are a popular approach in the web development community used for styling components. They allow you to write CSS that is scoped locally to the component rather than globally. This means class names and animations are scoped locally by default and do not conflict with other styles in the application.

## Using Custom Fonts with CSS Modules in Next.js
To implement custom fonts in your Next.js project, you can follow these steps, which involve using a CSS Module file:

#### Step 1: Define Your Font-face
In your `.module.css` file, you will declare your `@font-face` like this:

```css
.module.css
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/my-font.woff2') format('woff2');
}
```
This defines the family name of your font and specifies the location and format of the font file, ensuring the browser can correctly load and render it. The `woff2` format is often recommended due her
Description for MTA token
Published: 2024-06-29 09:49:03

MTA is the native cryptocurrency of the Meta platform. It is an TON token based on the TON blockchain. MTA is used as a utility token within the Meta ecosystem, providing various functionalities and benefits to its users. It can be used for transactions, staking, voting, and participating in the governance of the platform. MTA holders can also earn rewards and incentives for their participation and contributions to the network. Overall, MTA plays a crucial role in enabling the decentralized and community-driven nature of the Meta platform.
The distinctions between React and Vue
Tags: hng, react, vue, webdev
Published: 2024-06-29 09:46:22

Frontend development is a technical skill that involves using various technical tools to create the interactive part of a website or web application.
A frontend developer achieves this by using languages like HTML, CSS, and JavaScript.
HTML is a markup language that is used to develop the structure of a website. CSS is responsible for the beauty of a website, while JavaScript is used to programme the behaviour of a website.
There are various frameworks that enable a frontend developer to build user-friendly and responsive websites. Some of these frameworks are React and Vuejs. 

---

## What is React?
React is a JavaScript web framework for building interactive web interfaces. React is a component-based framework that allows developers to create reusable components. It functions by creating a virtual DOM of the real DOM, which it uses to efficiently update changes without re-rendering the entire page of a website.
 

---

## What is Vue?
Vue is also a component-based JavaScript web framework that allows the creation of beautiful web user interfaces. It's key feature is its reactive data binding system. This system allows developers to create dynamic and interactive web interfaces by automatically updating the DOM when the underlying data changes. 

---

## React vs Vue.
Vue and React share many similarities in their purpose and mode of operation. However, there are several distinctions between them that make each ideal for specific business scenarios.

---

## Similarities
1. They are both JavaScript web frameworks.
2. They employ a component-based approach. 
3. The virtual DOM system is used for efficient rendering of pages.
4. They have a large community. 

---

## Differences
1. Vue is easier to learn for beginners as opposed to React.
2. React uses the JSX approach for development, while Vue uses a template-based system.
3. Vue is a lighter-weight framework, and as such, it is more suitable for small and medium-scale projects than React.
4. React has a larger community and offers more job opportunities than Vue.
5. Vue has an in-built state management system, while React relies on libraries.

---

## Summary
React and Vue are very efficient JavaScript frameworks. In deciding which one to use for your projects, find a balance between your skill sets and project's demands.

I work more with Vue than React, but I'm excited about working with React during my [HNG Internship](https://hng.tech/internship).
My expectations for the internship are high, and I look forward to making the most of the opportunity.
You can learn about the wonderful opportunities HNG offers [here](https://hng.tech/premium).
"HNG 11 internship: Embracing new challenges"
Published: 2024-06-29 09:43:50

I'm Muhammad Yahaya, a full-stack developer dedicated to creating innovative solutions, and constantly pushing the boundaries of what is possible in the world of software engineering. 

From designing elegant user interfaces to building robust backend systems that are scalable, efficient, and secure, I am committed to delivering software solutions that are both functional and intuitive, always putting the needs of users first.

In addition to my technical skills, I have excellent communication skills and a collaborative approach to teamwork, making me an asset to any project or team.

I took a bold step to apply for the fast-paced and challenging HNG 11 cohort boot camp and got in. 

HNG Internship is a fast-paced, competitive online boot camp for coders, designers, and other technical talent. It is designed for people who want to rapidly upskill themselves, learn new technologies, and build products in a collaborative and fun environment.

You can get more information about the program [here](https://hng.tech/internship).

A few weeks before getting into the internship I faced a challenge while integrating Flutterwave and korapay payment gateway. “I want to use a single form to request for the amount a user wants to pay and have a select drop down to select the payment gateway they are paying with and it should instantly redirect them” 

Using html, css and Js(Ajax) for the frontend and Laravel for the backend, I came up with a solution. 

I wrote a JavaScript code to get the amount and the method of payment selected, followed by a switch statement to redirect the user to the gateway payment page based on the gateway selected. 

For flutterwave integration: There is a callback function to redirect to the callback URL with the transaction reference and status as a param in the url(user/flutterwave/reference/success) after a successful or failed transaction, the callback url is the backend endpoint for verifying the transaction by requesting the flutterwave verification endpoint sending the transaction reference as a post request, this request returns a json data, I proceeded to check if the transaction status is successful and got the amount paid then I can finally credit the user. If it's a failed transaction I created a notification to notify the user instantly. 

**My goal for the HNG Internship**

I am on the Backend Development track therefore one of my goals is to be able to put my skills into practice, connect and learn from other developers.  

You can also decide to join HNG premium [here](https://hng.tech/premium), and below are the perks for it: 

Network with other HNG finalists
Access exclusive opportunities
Collaborate on projects
Job recommendation and certificate.
core java -Basics
Tags: beginners, programming, learning, java
Published: 2024-06-29 09:37:05

## DAY-3
Today we will discuss about object!

## OBJECT:
==>Object are created from a Class.
==>An Object is a Real world entity.
==>In order to Create a class object first we need to write "**new**" keyword and initialize that object with the help of a constructor, constructor name will be same as class name.
==>We can create any number of object from a Class.

**Example:**
ClassA aobj = new ClassA(); //ClassA object
ClassB bobj = new ClassB(); //ClassB object
ClassC cobj = new ClassC(); //ClassC object


> I write a **simple program** to understand the how to create **Class Object.**

`public class First
{
public void msg()
{
System.out.println("HELLO WORLD");
}
private void display()
{
System.out.println("java is awesome");
}
public static void main(String[] args)
{
System.out.println("Start");
First obj=new First(); //Creating an object
obj.msg();            //Calling a method
obj.display();         //calling a method
System.out.println("End");
}
}
`

**OUTPUT:**
Start
HELLO WORLD
java is awesome
End

Every Program to Run in java  we can do 2 specific tasks: 
                 1)Compilation
                 2)Running

## Compilation:
 [**java Compiler==>javac Filename.java**]

- Here Compilation do Java Compiler, java Compiler Command  is Javac Filename.java.

- Compilation means checking the code whether we have written according to the java language Syntax or not.

- After **Successful Compilation** java Compiler is going to generate a **.Class file** .

- The generated .Class File name will be same as Class name.

- The generated .Class file Consists of bytecode instructions which are understand only by the machines , humans Can not understand them.

## Running: 
[**JVM**(Java Virtual Machine)==>**java generated .Class File name**]

- In order to **run our java program** we need to send our generated .Class File as input to the JVM.

- JVM is going to check whether all the byte code instructions present in the .Class file are Correct Or Wrong **if Correct** will be getting **Output** if **Wrong** we will be getting an **Exception**.

Waiting for Day-4-----------------------------------------------------
Discovering the Power of Atlassian Resources
Tags: agile, devops, learning, beginners
Published: 2024-06-29 09:21:49

Recently, I explored the extensive resources provided by Atlassian on Agile, DevOps, and more. Their comprehensive material not only refreshed my understanding of Agile and Scrum methodologies learned at Red Hat, but also expanded my knowledge on critical topics like various [Git workflows](https://www.atlassian.com/git/tutorials/comparing-workflows), DevOps culture, and the [Scaled Agile Framework (SAFe)](https://www.atlassian.com/agile/agile-at-scale/what-is-safe).

**Practical Tips from Atlassian**
1. Consider Gitflow for Large, Complex Projects: Atlassian's guide on Git workflows offers valuable insights into enhancing your version control strategy. The Gitflow model, in particular, is useful for managing larger projects, ensuring a streamlined and efficient development process. It might become The Solution if your current workflow isn't scaling well.
2. DevOps Best Practices: Their insights into DevOps culture emphasize the importance of continuous integration and continuous deployment (CI/CD). One key takeaway for me was how crucial it is to address the cultural aspects of DevOps. Even the best processes won't yield results if the team culture isn't supportive.
3. Scaled Agile Framework (SAFe): For organizations looking to scale Agile practices, Atlassian’s resources on SAFe provide practical advice on aligning multiple teams towards common objectives. This can greatly improve overall productivity and cohesion. It's worth exploring if you're finding it challenging to maintain alignment as your team grows.

I'm interested in Your experience with Agile, DevOps and innovation in the organizations. Any stories to share or tips to suggest? :)
Frontend Technologies (Angular and Vue.js)
Published: 2024-06-29 09:19:08

The frontend development landscape is constantly evolving, with new frameworks emerging to simplify the process of building modern web applications. Angular and Vue.js, offer distinct advantages depending on project requirements and team preferences 



## Vue.JS 
Vue.js the brainchild of Evan You has revolutionised frontend development with it’s intuitive and adaptable nature. Dubbed the “progressive framework”, Vue.js empowers developers to seamlessly integrates its features into their projects, at their own pace 

Vue.js adopts a modular component based architecture, similar to React , promoting a structured and maintainable codebase.Vue’s reactivity system automatically updates the DOM when data changes ,similar to React’s virtual DOM, ensuring efficient rendering and optimal performance 

One of Vue.js standout features is it’s single file components which encapsulates HTML,JavaScript, and CSS within a single file.This improves readability and enhances development speed




## Angular
Angular, developed by Google, is a comprehensive framework designed for building dynamic web applications. Released in 2010 (initially as AngularJS), it has undergone significant evolution, leading to the development of Angular (the modern version) in 2016


Angular synchronizes data between the model and the view, ensuring that any changes in the model reflect immediately in the view and vice versa.

Angular has a built-in dependency injection system, which makes it easier to develop, understand, and test applications.


## A comparison of Angular and Vue

Angular is a comprehensive framework with a steep learning curve, suited for large, complex applications. Vue.js, on the other hand, is simpler and more flexible, making it easier for beginners to learn and use.

Vue.js’ smaller size and virtual DOM make it faster and more efficient for smaller applications. Angular’s extensive feature set can introduce more overhead but provides powerful tools for building and managing large applications.


Angular, backed by Google, has a larger enterprise community and a robust ecosystem. Vue.js, while not backed by a tech giant, has quickly built a passionate and active community.


Working with React has been an enjoyable experiment or me even though I just started I will really want to learn more about react at the HNG internship if you would like to join e you can join me using any of these links 
https://hng.tech/internship
https://hng.tech/premium
At HNG, I look forward to continuing to hone my skills in React, exploring new patterns and practices, and contributing to exciting projects.
How to encrypt disks in GCP?
Tags: gcp, encryption
Published: 2024-06-29 09:15:15

---
title: How to encrypt disks in GCP?
published: true
description: How to encrypt disks in GCP, a tutorial
tags: gcp, encryption
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxi0xx8j5im0bcblkt6s.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-29 09:13 +0000
---

Today, we're going to talk about encrypting disks in GCP using the Key Management Service, or KMS, and we'll also discuss the three possible ways to encrypt them.


GCP offers robust and versatile encryption solutions. Whether you're looking to encrypt data at rest, in transit, or during processing, GCP has got you covered.


One of the tools that GCP offers for encryption is the Key Management Service, or KMS. KMS allows you to create, import, and manage cryptographic keys for your cloud services. These keys are essential for encrypting and decrypting data.


The first method is using Google-managed encryption keys. This is the default encryption provided by GCP. Here, Google automatically encrypts your data before it's written to disk.


The second method is using customer-managed encryption keys through KMS. This gives you more control over your encryption keys.


And the third method is using customer-supplied encryption keys. This is where you create and manage your own encryption keys outside of GCP.


When you create a disk, it is automatically encrypted with the first method, and if you don’t change any settings, it will always be like that. When we create a disk, the option that is activated is "Google-managed encryption key." And when the disk is created and we check inside, we see "Google-managed."


Now, to use the second method, we first need to create a ring in KMS. This ring is going to be a container for our keys, and this key could be a random one created by Google, or if we have one, we can import it. In our case, we are going to create a software key that will later be used on our disks.


When the key is created inside our ring, we can use it. To do that, when we go to create a disk, in the encryption section, we can choose our encrypted KMS key. And as before, when the disk is created, we can go inside and see how now the disk is not marked as Google-managed because we created the KMS key.


For the third option, we are going to create our own certificate, and to do that, we are going to use a Python script. The problem here is that if you lose this code and for some reason it is needed, you will lose all the information on the disk. As soon as we create the disk and choose the third option, we can paste the key, and now when we go inside the disk, we can see how it is marked as that.


I hope that you enjoy this session and don’t forget to encrypt.


***


*Here' the same article in video form for your convenience:*

{% embed https://www.youtube.com/watch?v=qTRmgP3oaqk %}.
Premium Leather Bondage Gear - The Leather Sensations
Tags: bdsm, bondage, fetish, leather
Published: 2024-06-29 09:14:50

Welcome to The Leather Sensations, your premier destination for exquisite Leather Bondage Products that redefine pleasure and sophistication. Our extensive collection is meticulously crafted to cater to the desires of discerning individuals seeking an elevated and indulgent experience in the realm of intimate exploration.


At The Leather Sensations, we understand that the pursuit of pleasure is an art form, and our Leather Bondage Products are designed to enhance this journey. Immerse yourself in a world of sensuality with our carefully curated selection of premium leather restraints, harnesses, cuffs, and accessories. Each item is expertly crafted from the finest quality leather, ensuring a luxurious feel against the skin and unparalleled durability.
A JOURNEY TO FULL-STACK DEVELOPMENT
Published: 2024-06-29 09:05:11

Hello, I am Ramon Ibrahim o, a Backend developer with 2 years of vast experience in backend and machine learning.

My journey to programming language kick-started immediately after I finished Python training with NIIT and enrolled in Zuri Training.

The Zuri program was exciting, it gave me a great opportunity to meet with like-minded people and exposed me to real-world projects.
Since then, I have been working on group and personal projects.

I have worked on numerous projects in backend development, like E-commerce projects, School Management systems, Todo-list, Blog Apps, etc...
Recently, I worked on a project on how to build an API using the rest framework. At some point, I got stuck, when I was supposed to get JSON data from the browser. After making some findings on similar issues; 
Here are the steps I took to be able to solve the problem:

1. I built a capability on the urls.py file with a function code.

2. I import rest_framework.URL patterns.


After all these, the result came out positive, The application ran smoothly.
I chose to join the HNG internship to enhance my Backend development skills and also to meet and collaborate with like-minded in the same track.
However, I encourage those who are interested in learning and getting more experience can visit this page <a href=https://hng.tech/internship>HNG INTERNSHIP PROGRAM</a> , and for those who want to hire talented developers visit here <a href=https://hng.tech/hire>HNG HIRE</a>.

In conclusion, building an extensive Django API is a great practice and a wonderful experience for me.

Contact me at <a href=https://www.linkedin.com/in/ibrahim-ramon-369999212/>Linkedln</a>
How a “Skeleton Key” Could Crack Open Your AI’s Secrets
Tags: cybersecurity, skeletonkey, ai, webdev
Published: 2024-06-29 09:00:46

Skeleton Key: Imagine a world where artificial intelligence, designed to be helpful and informative, could be tricked into spilling your deepest secrets. A recent discovery by Microsoft researchers paints a chilling picture of this potential reality. They've unearthed a novel attack method dubbed the "Skeleton Key" that undermines the safeguards keeping generative AI models from divulging sensitive data.

## The Jailbreak Artist in Your Pocket

Generative AI systems, like the ones powering chatbots and virtual assistants, are trained on massive datasets. This firehose of information can be a double-edged sword. While it fuels their intelligence, it also harbors the potential for hidden dangers. The Skeleton Key exploits a vulnerability in how these models process instructions.

## Beyond Molotov Cocktails: The Looming Data Breach

While the Molotov cocktail example might seem like a parlor trick, the true gravity of the Skeleton Key lies elsewhere: your personal data. Imagine a bank's AI assistant, trained on customer information, being tricked into revealing account numbers or Social Security details. The possibilities are frightening.

## The Art of Defense: Building a Secure AI

There's a glimmer of hope. Microsoft suggests several measures to fortify your AI's defenses. Hard-coded filters can screen user prompts, preventing them from exceeding pre-defined safety boundaries. Additionally, robust monitoring systems can identify suspicious activity and trigger countermeasures before sensitive data is compromised.

The Skeleton Key serves as a stark reminder: AI security is paramount. By taking proactive steps, we can ensure that our intelligent companions remain bastions of trust, not ticking time bombs waiting to explode.

## The Software Developers: Skeleton Key

Software developers play a crucial role in safeguarding AI models. Are they implementing robust security protocols like hard-coded filters and intrusion detection systems? Are they actively researching and patching vulnerabilities as they arise?

For more details click on this link here - https://hyscaler.com/insights/ai-skeleton-key-attack/