teleren/devto huggingface dataset:
Feeling overwhelmed by technical articles? Let's find a solution
Tags: productivity, career, learning, codenewbie
Published: 2024-04-21 08:47:34

Sometimes I feel that I'm reading a lot of technical articles and watching videos, but nothing really sticks to my mind after a few days (or hours!) 😅

**Has it ever happened to you?**

I feel less guilty than watching pointless videos on socials, sure, but if I can't even remember what articles I read yesterday, then what's the point? Is there even a difference?

In the back of my mind, I probably hope that when I get into a situation I already read an article about, that knowledge magically pops out. In that case, it doesn't matter that today I don't remember what I read yesterday, as long as that information is available at the right time I need it.
Does it make any sense? I can say that sometimes it works, but probably most of the time it doesn't.

This morning I woke up with the idea of forcing myself to slow down and add an extra step: take note of each article I read or technical video I watch.

I set up a notion database where I want to write a short summary of each content I consume, along with some tags to categorize it.
The idea here is to force myself to think about what I'm reading and be much more intentional about it.

![Notion page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05qxtbunncdpg1wdepdq.png)

This means that the amount of content I consume will decrease, with the goal of increasing the quantity (and quality) of information that sticks to my mind on that specific content.

Let's be honest, knowing how lazy I am this will likely last no more than a few days, but let's give it a try!

If you've been in a similar situation, how did you handle it? Did you find any strategy that worked for you or did you just surrender to this kind of doomscrolling in disguise?

---

Thanks for reading this article, I hope you found it interesting!

I recently launched a GitHub Community! We create Open Source projects with the goal of learning Web Development together!

Join us: https://github.com/DevLeonardoCommunity

Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ❤️
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/c/@DevLeonardo?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}
EXPLORING APPLICATION SECURITY SERVICES ON AWS
Published: 2024-04-21 08:43:43

One of the services is **WAF(WEB APPLICATION FIREWALLS)**
**<u>Firewall Basics:</u>**

**Purpose:** Prevent unauthorized access to networks by inspecting incoming and outgoing traffic against defined security rules.

**<u>Web Application Firewall (WAF):</u>**

**Purpose:** Protect web applications against common web attacks.
**Key Protections:** Defense against SQL injection and cross-site scripting (XSS).
**Real-World Application:** Deployed on EC2 instances or CloudFront to block XSS attacks directly.

Another services is **DDOS(DISTRIBUTED DENIAL OF SERVICES)**
a DDOS attack causes a  traffic jam on a website or web application in an attempt to cause it to crash

**<u>Distributed Denial of Service (DDOS) Protection:
</u>**
**Service:** AWS Shield.
**Features:** Always-on detection for DDOS attacks.
**Types:** Shield Standard (free) and Shield Advanced (paid).
**Supported Services:** CloudFront, Route 53, ELB, AWS Global Accelerator.
**Real-World Application:** Real-time notifications and assistance during DDOS attacks.

We also have **MACIE**

**<u>MACIE (Data Discovery and Protection):</u>**
**Purpose:** Discover and protect sensitive data using machine learning.
**Key Features:** Evaluates S3 environments and uncovers personally identifiable information (PII).
**Real-World Application:** Identifying and securing sensitive data like passport numbers stored on S3.


Each of these services plays a crucial role in securing different aspects of web applications and infrastructure. Firewalls like WAF protect against specific attacks, DDOS protection services like AWS Shield defend against large-scale attacks, and data discovery tools like MACIE help identify and protect sensitive information within cloud environments. These tools are vital components in maintaining the security and integrity of online applications and data.
From Chaos to Clarity: Mastering React Folder Structure as You Grow
Published: 2024-04-21 08:43:03

As a React developer, your project structure is like your apartment. When you're starting out (junior level), it might be a single room with everything thrown together. But as you gain experience (senior level), you learn to organize things for efficiency and maintainability. This blog post dives into the evolution of React folder structures, from the "just getting started" phase to building robust, scalable applications.

**The Early Days: The Flat Folder Frenzy**

Many beginners start with a simple folder structure. Components, styles, and utility functions all reside in a single location. This might work for small projects, but as your application grows, it becomes a tangled mess. Finding specific files turns into a treasure hunt, and maintaining consistency becomes a nightmare.

**The Shift Towards Organization: Grouping by Type**

As you level up, you recognize the need for organization. You separate components, styles, and utility functions into dedicated folders. This brings a sense of order, making it easier to navigate your project. It also improves collaboration, as teammates can quickly understand where to find specific file types.

**The Art of Feature-Based Breakdown: Senior-Level Structure**

Senior developers take organization a step further. They introduce a feature-based structure. Each feature (like a login page or a product listing) has its own dedicated folder. Within that folder, you'll find components specific to that feature, along with any related styles and logic (hooks, utility functions). This approach promotes modularity, making it easier to isolate and maintain individual features.

**Beyond Features: Considerations for Large Projects**

For truly massive projects, you might need additional layers of organization. Here are some potential considerations:

**Pages:** A dedicated folder for top-level pages (homepage, about us, etc.) that assemble components from various features.
**Assets:** A central location for static assets like images and fonts.
**API:** A dedicated folder for code interacting with APIs (data fetching, authentication).
**Remember:** There's no "one size fits all" structure. The best approach depends on your project's complexity and team size. The key is to find a structure that promotes clarity, maintainability, and scalability.

**Bonus Tip:**  Always strive for consistency. Establish clear naming conventions for your folders and files, and document your chosen structure for future reference.

By following these principles, you can transform your React project structure from a chaotic jumble into a well-organized masterpiece, making your development experience smoother and more efficient.
GitHub Sponsors: Oliver Blanthorn main developer of Tridactyl
Tags: github, opensource, firefox, vim
Published: 2024-04-21 08:28:44

---
title: GitHub Sponsors: Oliver Blanthorn main developer of Tridactyl
published: true
description: Developing a Firefox extension for the vim enthusiasts can get you a few sponsors.
tags: github, opensource, firefox, vim
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-04-20 16:10 +0000
series: github-sponsors
---

After writing the first post I shared it in one of the Facebook groups where I am a frequent poster. On person wrote:

> I make a monthly donation of $10 to bovine3dom (author of tridactyl). He makes the web experience a little less crappy for me.

So I looked at the GitHub account of bovine3dom

{% embed https://github.com/bovine3dom %}

and that of

{% embed https://github.com/tridactyl/tridactyl/ %}


And then looked at the [Sponsor Oliver Blanthorn](https://github.com/sponsors/bovine3dom) page.

## What is Tridactyl?

> Replace Firefox's default control mechanism with one modelled on the one true editor, Vim.

While I personally love and use vim as an editor and I know vim enthusiast would want to use it everywhere, I though this is a rather esoteric project. However it has 4.9k stars on GitHub. Not bad.

## What does Oliver ask for?

He wants to reach $700 / month, a very modest request. Especially given the cost of living in the UK where he seem to be located. He basically wants to spend less time looking for contract work and spend more time on the project.

Currently he is "47% towards $700 per month goal" with 64 current sponsors. That $329 / month an average of $5.14 / sponsor / month.

## What does he offer?

He offers a quarterly newsletter to every sponsor and a monthly newsletter to every sponsor above $10. He has several tiers also above $10, but based on the reported amounts not many people selected those.

## Follow me / Sponsor me

If you'd like to read more such posts, don't forget to upvote this one, to follow me here on DEV.to and to [sponsor me via GitHub Sponsors](https://github.com/sponsors/szabgab/).
Unlock Superior Security: Implementing 2FA in Ruby on Rails with a Twist!
Tags: ruby, rails, security, webdev
Published: 2024-04-21 08:24:20

## Introduction:

Welcome to our interactive guide on enhancing your Ruby on Rails application's security with two-factor authentication (2FA)! In this engaging tutorial, we'll show you how to add an extra layer of protection using OTPs and QR codes. But wait, there's more! We'll also optimize the code and give the models a fresh new look! Let's dive in and make your app more secure and user-friendly!

**Step 1**: Setting up the ROTP Gem 🛠️

Let's start by adding some magic to your Gemfile! 🧙‍♂️

```ruby
gem 'rotp'
```

Run `bundle install` to install the ROTP gem and unlock the power of OTP generation in your Rails app!

**Step 2**: Creating the User Model 🧑‍💼

Meet your User model, the guardian of your app's security! 🛡️

```ruby
class User < ApplicationRecord
  attr_accessor :otp

  before_create :create_passkey

  # Add methods for passkey creation and verification
end
```

**Step 3**: Generating QR Codes with RQRCode 🌈

Let's add some color to your authentication process with QR codes! 🌟

```ruby
gem 'rqrcode'
```

Create a QR code generation method in your QrController to make setting up 2FA a breeze! 🚀

**Step 4**: Verifying OTPs on Login 🔒

Time to put your 2FA to the test during login! 🚪

Add the `verify_passkey` method to your ApplicationController to ensure only the rightful users gain access! 🗝️

## Optimisation: 
💡

Let's optimise the `passkey_verification` method in the User model for better performance:

```ruby
def self.passkey_verification(email, otp)
  user = User.find_by(email: email)
  return false unless user

  totp = ROTP::TOTP.new(user.passkey)
  totp.verify(otp)
end
```

## Conclusion:
 🎉

Congratulations! You've successfully leveled up your app's security with 2FA in Ruby on Rails! 🚀 By following these steps and adding a touch of magic with gems like ROTP and RQRCode, you've made your app more secure and user-friendly. Keep exploring and enhancing your app's security to provide a top-notch experience for your users! 🌟
Second Largest Element in an array
Tags: secondlargest, array, javascript, programming
Published: 2024-04-21 08:04:05

> This is the given array

```
let arr=[1,2,4,7,7,5]
```

> Declare the two variables

```
let firstMax;
let secondMax;
```

> Then find out the which is greater in the first 2 index values

```
if(arr[0] > arr[1]){
  firstMax = arr[0]
}else{
  secondMax=arr[1]
}

if(arr[1] > arr[0]){
  firstMax = arr[1]
}else{
  secondMax=arr[0]
}
```

Then begin the loop from 2 to last index of the array

## In the first loop

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

## In the second loop

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

## In the third loop 

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

## In the fourth loop

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

Complete solution to find the second largest in the array

```
let arr=[1,2,4,7,7,5]

let firstMax;
let secondMax;

if(arr[0] > arr[1]){
  firstMax = arr[0]
}else{
  secondMax=arr[1]
}

if(arr[1] > arr[0]){
  firstMax = arr[1]
}else{
  secondMax=arr[0]
}

for(let i=2;i<arr.length;i++){
  if(arr[i] > firstMax){
    secondMax=firstMax;
    firstMax=arr[i];
  }
  
  if(arr[i] > secondMax && arr[i] < firstMax){
    secondMax = arr[i]
  }
  
}

console.log("firstMax",firstMax)
console.log("secondMax",secondMax)
```
Optimizing.
Tags: newbie
Published: 2024-04-21 07:55:31

First off I would like to say I am really looking forward to learning everything about coding and definitely utilizing the resources that I have at my disposal. I want to learn more about optimizing, and making good use of memory. Bottleneck was and interesting word I had to look it up and see what it meant in the coding world, it states "An inefficiency where the flow of the project and/or work stops or slows at a particular point". To this is what I want to master first because it seems it can make or break a project.
Day 2 - SIRF (Research Congress)
Published: 2024-04-21 07:46:48

The day where all 4th year student will be presenting their Thesis and Capstone project. For the morning, we were already in the venue because we were told that the panelist might asks questions regarding with our infographics that we posted the night before. So we didn't do much in the morning aside from helping with the last touch for the venue, like the table for the panelist with the cloth, and the tablet for where they can view the infographics easily, as well as their pencils and scoring paper. 

Then the real event started at 1pm, where we started the event with a prayer as well as the national anthem and the loyalty song. After that, each of the group and individual was called to present, and my group was the sixth presenter. Everything went smoothly while just sitting down and waiting for our turn, however, the nervousness kicked in after we were called and standing in front of the panelist. And during the open forum, we did our best in answering all the questions that was thrown to us and me and my partner just taught after that ends that we did our best and we thought our presentation was great so that's all that matters, so basically we did not expect any reward given to us. But! Thankfully our hard work has paid off and we bagged two awards, which was  Best Podium and Best Poster both runner up. So we were really happy especially that we did not expect it. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phuowahemj2jqmnih1q9.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ixgq76cgohikayftu2a.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt5w281e4tshofdudgqh.jpg)
Angular Directive Selector
Tags: angular, beginners, programming
Published: 2024-04-21 07:43:44

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

All **Angular Directives** have a selector, which specifies which HTML elements will the directive work with.

Most often, the selector is an attribute selector, which means that the directive will essentially be a custom HTML attribute.

However, Angular directives can be much more than just custom attributes:
⭐ Non-custom attribute selectors
⭐ Attribute selectors with values
⭐ Class selectors
⭐ Combining selectors
⭐ etc

But it **can not** ⛔ target **child-parent relations**. Angular Directive selector is impossible to target elements that are children of some specific parents only.

Angular just picked the **last element** from the confusing (from its perspective) selector and applied the directive to it.

So, **no complex parent-child** (or sibling, ancestor, descendant, etc.) relations for directive selectors. Remember, Angular directive selectors are **not exactly CSS selectors**.

---

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:
- **Medium:** https://medium.com/@nhannguyendevjs/
- **Dev**: https://dev.to/nhannguyendevjs/
- **Hashnode**: https://nhannguyen.hashnode.dev/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/
- **Buy Me a Coffee:** https://www.buymeacoffee.com/nhannguyendevjs
Day 1 - ICT Seminars 2024
Published: 2024-04-21 07:27:10

April 4, 2024 is our ICT Seminar in which every group will be inviting speakers from our industry partners or the groups chosen speaker. Since I am an intern from CPI Inc. we have invited the company to be our speakers and miss Vanessa, the general manager of CPI, gladly accepted the invite and even brought two speakers. 

The said event started at 9am and it went on smoothly with each group having specific responsibilities like, introducing their speaker, doing the icebreaker, and summarizing the speakers presentation. After the morning session, we had lunch and continue with the rest of the presentation in the afternoon, and CPI started at 1:30pm. From our group, Chevie was the one who introduce the speakers, I am the one who handles the icebreaker, while Vince does the summarizing of presentation. I was a bit nervous doing the icebreaker but since everyone in the venue was entertained and was into my game, I relaxed immediately and enjoyed doing the icebreaker. 

After our part, Vince then summarizes the presentation and then continued with the other speakers. The event was done not later than 5pm and we immediately went to main function room for our dry run for the research congress. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf99n7thznt26qd4x8be.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fznd0bu0npa9aab6s09b.jpg)
SOFTWARE TESTING AND ITS RELEVANCE
Tags: learning, python, softwaretesting
Published: 2024-04-21 07:40:00

******software testing introduction**

      software testing is a phase after the software development where we make sure that the product delivered is working as per the requirements also bug free, and it can be done in two ways - 
1. Manual testing,
2. Automation testing.

we should be aware of characteristics of software testing such as the software is reliable to the user, practical and capable of finding bugs.

  In terms of testing all the screens should be properly navigated also all the functionalities of each field should be validated and working fine.

  we should know when we should start and stop software testing phase. Once software is delivered, we cannot subject it for testing phase.
  
  Testing phase starts with test case design, in which test case to written for both positive and negative test cases.

  Once bugs are reported to the development team, they will fix the bug and send back to us for retesting in that case our work is to check for that reported bug is rectified and that specific rectification does not reflect any changes in other modules of the application, for which we have to perform regression testing it is a testing process in which testing happens in a form of iteration. 

 In which each and every module to be tested to ensure that new rectification has not made any change in other functionalities of software.

 **software testing and its relevance**

    Testing is most important phase of software development because any bugs left uncaptured/unresolved it may cause big issue at the user side from business perspective. 

For example, polling machine to be tested before the election phase for its functions like button clicks, data storage at the back end, loopholes associated with it, generation of voting receipt etc. Any single functionality of this cycle got bug it cause serious issue on the election department side so it's very important to make sure software is cent percent bug free.
Quick Tip: Nuxt & Storyblok Error Handling (e.g. 404)
Tags: nuxt, storyblok, errors, webdev
Published: 2024-04-21 07:38:48

Welcome to my new Quick Tip series:

Today we are looking at Error Handling when building websites with [Nuxt](https://nuxt.com/) and [Storyblok](https://www.storyblok.com) as CMS. If you haven't tried the two tools, go check out one of the awesome [tutorials](https://www.storyblok.com/tp/add-a-headless-CMS-to-nuxt-3-in-5-minutes). It's a perfect match for all your projects. 

Today we are looking into one specific use case:

1. Build a blog post detail page with a dynamic slug in the URL param
2. Fetch the content from Storyblok CMS
3. If the content cannot be found (Storyblok returns 404), Nuxt should show an error Page
4. The solution must work with Server-Side-Rendering and Server-Side-Generation


## Solution

```vue
<template>
    <YourArticleDetailPage :story="story" />
</template>

<script lang="ts" setup>

// Get the Slug from the Route
const route = useRoute()
const slug = route.params.slug

// Load the Content from /blog
const story = await useAsyncStoryblok(`blog/${slug}`)


// Handle the Error
if (!story.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Page Not Found',
        fatal: true,
    })
}
</script>

```

_Noteworthy:_

The most important part of the solution is `fatal: true` in the error object. This will trigger a full-screen error page in Nuxt and redirect the user to the error page.


Now you can go ahead and create the error page with `error.vue` - as described [here](https://nuxt.com/docs/guide/directory-structure/error). Remember: the `error.vue` must be kept in root, not `/pages`



That's it for today's quick tip.
Building my AI directory on a budget, all with Cloudflare
Tags: cloudflare, svelte, tailwindcss, saas
Published: 2024-04-21 07:38:00


The SaaS world is bursting with products, and I figured – why not try building something myself?  I wanted to use the latest and greatest tech, so I put together an awesome stack:

**Cloudflare R2, D1, and Drizzle**: For storage and database (more on this in a minute!)
**Cloudflare Pages**: Hosting, because who doesn't love free?
**Sveltekit**: My favorite framework for a smooth, snappy experience.
**shadcn**: To make it look good (Tailwind is the best!).

Honestly, this is probably the most affordable way to build something with Svelte right now.  Cloudflare has blown me away with what it gives away, and it lets a scrappy developer like me get started for next to nothing!

**Cloudflare to the Rescue!**

At first, I was thinking about using Supabase for my database.  But then I discovered that Cloudflare actually has their own built-in SQLite database – **D1**!  And guess what? It's super fast.  So I figured, why switch gears when I've got an amazing solution right here at Cloudflare?

**What I've Done So Far**

Honestly, it's still basic. Right now, you can:

Browse AI products
Submit a new AI product

Please head over to [https://spaceofai.tools/](https://spaceofai.tools/) and let me know what you think!