teleren/devto huggingface dataset:
How to Choose The Right Front-End Framework For Your Next Web Development Project?
Tags: webdev, frontend, react, devops
Published: 2023-01-12 13:22:56

This blog will enlighten you on front-end frameworks, factors to consider when choosing the best front-end framework, and skills to look for when hiring front-end developers. [Read the Full Blog Here](https://www.infowindtech.com/how-to-choose-the-right-front-end-framework-for-your-next-web-development-project/)
One door closes & another opens
Tags: softwaretester, bootcamp, beginners, testing
Published: 2023-01-12 13:07:45

I never got a chance to write up a goodbye on the Northcoders bootcamp course. It did give me an in-depth insight into the world of code.

Moving on, I'm starting a non-tech bootcamp with QA, studying the realm of a software tester. 

Here we go again...
Create a text transcript using Amazon Transcribe
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-01-12 12:35:00

[12/100] #100DaysOfCloud Today, I created a text transcript of a recorded audio file using Amazon Transcribe.

<u>Amazon Transcribe :</u>
Powered by deep learning technologies, Amazon Transcribe is a fully managed and continuously trained automatic speech recognition service that automatically generates time-stamped text transcripts from audio files. Amazon Transcribe makes it easy for developers to add speech-to-text capabilities to their applications. It uses a deep learning process called automatic speech recognition (ASR) to convert speech into text, quickly and accurately.

<u>Use Cases :</u>

- Get insights from customer conversations
 - With Transcribe Call Analytics, quickly extract actionable insights from customer conversations. AWS Contact Center Intelligence partners and Contact Lens for Amazon Connect offer turnkey solutions to improve customer engagement, increase agent productivity, and surface quality management alerts to supervisors.

- Search and analyze media content
 - Content producers and media distributors can use Amazon Transcribe to automatically convert audio and video assets into fully searchable archives for content discovery, highlight generation, content moderation, and monetization.

- Create subtitles and meeting notes
 - Subtitle your on-demand and broadcast content to increase accessibility and improve customer experience. Use Amazon Transcribe to boost productivity and accurately capture the meetings and conversations that matter to you.

- Improve clinical documentation
 - Medical doctors and practitioners can use Amazon Transcribe Medical to quickly and efficiently document clinical conversations into electronic health record (EHR) systems for analysis. The service is HIPAA- eligible and trained to understand medical terminology.

You can try to Create a text transcript of a recorded audio file using Amazon Transcribe yourself by following the steps from the link below :
[GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/012/Readme.md)
Calculate LoC (Lines of Code) using Bash
Published: 2023-01-12 12:03:25

Lines of Code (a.k.a. [Source Lines of Code](https://en.m.wikipedia.org/wiki/Source_lines_of_code)) is an important metric in software development. 

I've needed a way to count the number of lines in one of the front-end projects I've been working on.

I wanted to give it a try to find a simple solution. 

I've written the following shell command to get it done:

`find . -type d -regex ".+node_modules" -prune -o -type f -regex ".+\.\(\(tsx?\)\|\(jsx?\)|\(s?css\)\)$" -regextype posix-extended | grep node_modules -v | xargs -I @@ wc -l @@ | awk '{sum+=$ 
1} END {print sum}'` 

I've tested it on Git Bash and it worked. I guess it will also work on other Linux distros as well. Nothing fancy, just a simple bunch of generic commands piped together.

Let me document it. 

`-type d -regex ".+node_modules" -prune`
Excludes the node_modules folder.
 
`-o`
Means `or` and used to combine the other filter.

`-type f -regex ".+\.\(\(tsx?\)\|\(jsx?\)|\(s?css\)\)$" -regextype posix-extended`
Files with the extensions ts, tsx, js, jsx, css, scss are found. You can add yours to expand the coverage.
 
`grep node_modules -v`
To the output of find command above, ./node_modules is written even if it's excluded by the prune parameter. Files underneath the pruned folder do not come up but the name of the folder does. So, we find it with grep, use -v parameter to get the excluded lines (inverse selection) and as a result, we clean up the lines containing  "node_modules".
 
`xargs -I @@ wc -l @@`
This takes each line from the previous process, loads it into @@ variable and passes it to `wc` command. -l means "count the lines". In the output, number of lines and the file names are printed as follows:
`1502 a.tsx`

`awk '{sum+=$1} END {print sum}'`
awk, takes the first column (which is the number of lines), iteratively increments the sum variable, then prints the sum.

That's all.
Adding Cognito user via AWS API
Tags: aws, cognito
Published: 2023-01-12 10:25:37

Cognito is a fully managed identity service provided by AWS. It allows developers to easily add user sign-up, sign-in, and access control to their applications. When it comes to user registration, users can be added through the AWS console, the AWS CLI, or the AWS API. Some services, like AWS Amplify, come with user registration out of the box with an easy to use API.

What if you wanted to add more Cognito users in a bulk? It would make sense to write a script for that, and use the AWS API. This blog post will show you how.

Start off by installing the AWS SDK.

```shell
npm install aws-sdk
```

Then, create a JavaScript file and import the SDK:

```javascript
const aws = require('aws-sdk');
```

Before using the API, you need to set up your credentials. If you store your AWS credentials in the AWS config file, create a new instance of `SharedIniFileCredentials`:

```javascript
const credentials = new AWS.SharedIniFileCredentials({ profile: 'YOUR_AWS_PROFILE' });
```

If you use AWS SSO, you will need to `npm install @aws-sdk/credential-provider-sso` and then use its `fromSSO` function:

```javascript
const { fromSSO } = require('@aws-sdk/credential-provider-sso');
const credentials = await fromSSO({ profile: 'YOUR_AWS_PROFILE' })();
```

Set the credentials and the region, and create and instance of `CognitoIdentityServiceProvider`:

```javascript
aws.config.update({
  region: 'us-east-1',
  credentials,
});

const cognito = new aws.CognitoIdentityServiceProvider({
  apiVersion: '2016-04-18',
});
```

Next, invoke the Cognito API to create the user, set the password, and optionally add the user to a Cognito group:

```javascript
await cognito
  .adminCreateUser({
    UserPoolId: userPoolId,
    Username: email,
    UserAttributes: [
      {
        Name: 'email',
        Value: email,
      },
      {
        Name: 'email_verified',
        Value: 'true',
      },
    ],
  })
  .promise();

await cognito
  .adminSetUserPassword({
    Password: password,
    UserPoolId: userPoolId,
    Username: email,
    Permanent: true,
  })
  .promise();

if (groupName) {
  await cognito
    .adminAddUserToGroup({
      GroupName: groupName,
      UserPoolId: userPoolId,
      Username: email,
    })
    .promise();
}
```

That's it. You can wrap the above code into its own function, especially if you want to create many users in bulk. [See this GitHub gist](https://gist.github.com/dariodjuric/6e7f7557d96183620bc73bdb311ea819) for the entire code.
VSCode snippet: New React component (ts)
Tags: javascript, react, vscode, webdev
Published: 2023-01-12 11:44:48

When starting a new React component I use this snippet for the boilerplate.

There are VSCode extensions that do this exact thing. The thing is, I have already installed tons of extensions so, there is a code snippet instead: **`\new`**

{% embed https://vimeo.com/788615641 %}

In the video: I've created a new file named `alert.tsx` then press <kbd>\new</kbd> and get my base React component boilerplate (ts)

```ts
import './alert.scss';

interface Props {
  foo?: string;
}

export function Alert({ foo }: Props): JSX.Element {
  return <div className='alert'>{foo}</div>;
}

```

Just open `Snippets: Configure User Snippets > global.code-snippets` and add the following section to the JSON

```json
	"ts-component": {
		"scope": "typescriptreact",
		"prefix": "\\new",
		"body": [
			"import './${TM_FILENAME_BASE}.scss';",
			"",
			"interface Props {",
			"\tfoo?: string;",
			"}",
			"",
			"export function ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}({ foo }: Props): JSX.Element {",
			"\treturn <div className='${TM_FILENAME_BASE}'>{foo}</div>;",
			"}",
			"",
		]
	},
```

Note: I use a custom prefix to name my custom snippets (`\\`); this way I'm able to locate _my_ snippets quicker in the suggestion box.

--

Cover image from [unDraw](https://undraw.co)

Thanks for reading.
💚
Top 12 Icon Libraries 🔝
Tags: graphicdesign, uiweekly, ux, webdev
Published: 2023-01-12 11:23:47

For the period I have done Graphic and UX/UI Design, I have found these Icon resources to be useful.

1️⃣[Freepik](https://www.freepik.com)
2️⃣[Glyphis](https://www.glyphicons.com)
3️⃣[Font Awesome](https://fontawesome.com)
4️⃣[Smashicons](https://smashicons.com)
5️⃣[Iconfinder](https://www.iconfinder.com)
6️⃣[Shape so](https://shape.so)
7️⃣[Flaticon](https://www.flaticon.com)
8️⃣[The Noun Project](https://thenounproject.com)
9️⃣[IcoMoon](https://icomoon.io)
1️⃣0️⃣[Icons8](https://icons8.com)
1️⃣1️⃣[Iconmonstr](https://iconmonstr.com)
1️⃣2️⃣[Feather Icons](http://feathericons.com/) 
1️⃣3️⃣[Material Icons](https://material.io/resources/icons/)

Enjoy 🎉🎉
Ruby On Rails Beginners - Demystify the magic. Part 1: The Ruby looks a little different
Tags: rails, programming, webdev
Published: 2023-01-12 11:23:34

This is a series where we try and look past the Ruby 'magic' and understand how to demystify Rails, starting from 0 to reading Rails source code! Scary stuff.

[Part 2](https://dev.to/judelawrence/ruby-on-rails-beginners-demystify-the-magic-part-2-its-just-a-ruby-method-1pbj) | [Part 3](https://dev.to/judelawrence/ruby-on-rails-beginners-demystify-the-magic-part-3-the-linkto-method-9n)


When you first start learning Rails, it's usually after learning some basic programming in Ruby. This is still the best way to get into rails for a beginner, but making the jump can be a little bit confusing.

For me, the Ruby in Ruby on Rails looked different to what I was used to when I was writing Ruby, and when I was starting out I found it hard to understand what was going on. One of the reasons is that my eyes were used to seeing method arguments wrapped in parentheses `method_name(arg1, arg2)`. Something which you commonly don't use in rails.

So to hopefully help demystify Rails for someone (anyone?) going through the same confusion, I'm going to use the link_to method, as it's one of the first things you will work within a Rails app.

## What is link_to
Link_to is a method used in Ruby on Rails to create HTML links that point to a specific web address (url). It’s a powerful and flexible tool and it's an essential part of any Rails application.

It takes two arguments (it can also take a third argument and a block which we will cover later), the text to be displayed, and the target URL.

This is how you would usually see it, in a view file
```
<%= link_to “Home”, root_path %>
```
This is what it looks like with parentheses
```
link_to("Home", root_path)
```
For me on my first RoR day/week, this would have made a lot more sense. I think I missed the explanation that when you call a method in ruby that requires arguments, even if you don't use parentheses, ruby is smart enough to figure out that they must be arguments, so they are treated as such.

Because I missed that, I just put it down to that Rails magic that everyone keeps talking about.

This may seem really silly, and maybe it is, but if this helps anyone, even just a little bit, then I'm more than happy to look a little bit silly.

In part 2, I'll try and drive home that Rails is just plain old ruby, and we'll look at re-creating a basic version of the link_to method.

[part 2 >>](https://dev.to/jlaw79/ruby-on-rails-beginners-demystify-the-magic-part-2-its-just-a-ruby-method-1pbj)
Server-Sent Events 101
Tags: javascript, node, nestjs, sse
Published: 2023-01-12 11:18:13

---
title: Server-Sent Events 101
published: true
tags: ['javascript', 'node', 'nestjs', 'sse']
canonical_url: https://sevic.dev/notes/sse-101/
---

Server-Sent Events (SSE) is a unidirectional communication between the client and server. The client initiates the connection with the server using EventSource API.

The previously mentioned API can also listen to the events from the server, listen for errors, and close the connection.

```js
const eventSource = new EventSource(url);

eventSource.onmessage = ({ data }) => {
  const eventData = JSON.parse(data);
  // handling the data from the server
};

eventSource.onerror = () => {
  // error handling
};

eventSource.close();
```

A server can send the events in `text/event-stream` format to the client once the client establishes the client-server connection. A server can filter clients by query parameter and send them only the appropriate events.

In the following example, the NestJS server sends the events only to a specific client distinguished by its e-mail address.

```typescript
import { Controller, Query, Sse } from '@nestjs/common';
import { EventEmitter2 } from '@nestjs/event-emitter';
import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { MessageEvent, MessageEventData } from './message-event.interface';
import { SseQueryDto } from './sse-query.dto';

@Controller()
export class AppController {
  constructor(private readonly eventService: EventEmitter2) {}

  @Sse('sse')
  sse(@Query() sseQuery: SseQueryDto): Observable<MessageEvent> {
    const subject$ = new Subject();

    this.eventService.on(FILTER_VERIFIED, data => {
      if (sseQuery.email !== data.email) return;

      subject$.next({ isVerifiedFilter: data.isVerified });
    });

    return subject$.pipe(
      map((data: MessageEventData): MessageEvent => ({ data })),
    );
  }
  // ...
}
```

Emitting the event mentioned above is done in the following way.

```typescript
const filterVerifiedEvent = new FilterVerifiedEvent();
filterVerifiedEvent.email = user.email;
filterVerifiedEvent.isVerified = true;
this.eventService.emit(FILTER_VERIFIED, filterVerifiedEvent);
```

### Boilerplate

Here is the [link](https://sevic.dev/nestjs-starter?ref=devto-sse) to the boilerplate I use for the development.
5 Tips for Successfully Implementing a Serverless Architecture
Tags: serverless, aws, cloud, programming
Published: 2023-01-12 11:17:51

Serverless architectures are becoming increasingly popular as they offer benefits such as lower costs, scalability, and flexibility. However, successfully implementing a serverless architecture can be challenging. In this post, we will discuss 5 tips for successfully implementing a serverless architecture in your organization.

**1. Start small:** It's important to start small when implementing a serverless architecture, as it allows you to get a better understanding of the technology and its capabilities. Start by identifying a small, standalone function that can be easily migrated to a serverless environment. This will allow you to learn the ropes and gain experience before attempting to migrate larger, more complex systems.

**2. Plan for integration:** Serverless architectures rely on a variety of different services and functions working together, so it's important to plan for integration from the outset. Make sure you have a clear understanding of how your serverless functions will integrate with your existing systems and infrastructure.

**3. Monitor and optimize:** Serverless architectures can be more difficult to monitor and optimize than traditional architectures. Make sure you have the necessary monitoring and optimization tools in place to ensure that your serverless functions are performing at their best.

**4. Manage dependencies:** Serverless functions often have a variety of dependencies, such as external libraries or APIs. Make sure you have a clear understanding of these dependencies and how they will be managed in a serverless environment.

**5. Keep security in mind:** As with any system, security is a top priority when implementing a serverless architecture. Make sure you have appropriate security measures in place, such as encryption and access controls, to protect your data and systems.
Java Diploma Projects
Tags: webdev, javascript, programming, beginners
Published: 2023-01-12 11:05:32

Java is a popular programming language that is widely used in the development of various types of software applications. It is an object-oriented programming language, which means that it is based on the concept of objects that have certain properties and behaviors. As a result, it is a great language for students to learn when studying computer science or software development.

One of the best ways for students to gain hands-on experience with Java is through completing a [diploma project](http://youtube.com/watch?v=13SPzzUVQVM). A diploma project is a major assignment that is completed by students as part of their diploma program. It typically involves the development of a software application using a specific programming language, such as Java.

There are many different types of Java projects that students can undertake as part of their diploma. Some examples include:

A simple calculator application: This project would involve the development of a basic calculator that can perform basic mathematical operations, such as addition, subtraction, multiplication, and division.

A library management system: This project would involve the development of a system for managing a library's inventory, including books, CDs, and DVDs. The system would allow users to search for and check out items, as well as keep track of overdue items.

A student management system: This project would involve the development of a system for managing student information, including grades, schedules, and contact information. The system would allow teachers to input and access student information, as well as generate reports.

A game development project: This project would involve the development of a simple game, such as a platformer or puzzle game. This project would provide students with an opportunity to learn about game development and apply their Java skills in a fun and engaging way.

An e-commerce website: This project would involve the development of an e-commerce website using Java, which would allow users to browse, purchase and pay for goods or services online.

In order to complete a successful Java diploma project, students must have a solid understanding of the Java programming language, as well as knowledge of key concepts such as object-oriented programming, data structures, and algorithms. They should also have experience with a variety of development tools, such as integrated development environments (IDEs) and version control systems.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqgtox0hjkxsaz6hafu7.png)
Overall, [Java diploma projects](https://takeoffprojects.com/java-diploma-projects) are a great way for students to gain hands-on experience with the Java programming language and to apply the skills they have learned in a real-world setting. It is also a great way to showcase their skills to potential employers and build their portfolio.
Unlocking the Potential of AWS: Utilizing Documentation
Tags: aws, cloud, certification, knowledge
Published: 2023-01-12 11:05:10

AWS (Amazon Web Services) is a powerful and versatile cloud computing platform that offers a wide range of services and resources to help users create, deploy, and manage their applications. One of the most effective ways to enhance your knowledge and prepare for certification on AWS is to make use of the various documentation, FAQs, case studies, and white papers provided by the platform.

One of the best ways to utilize AWS documentation is to start by familiarizing yourself with the AWS documentation center. This is a comprehensive collection of documentation and resources for all of the services and features offered by AWS, and it is organized in a way that makes it easy to find the information you need. You can use the documentation center to learn about the different services and features available, as well as to find step-by-step instructions and tutorials for using them.

Another useful resource for enhancing your knowledge of AWS is the AWS FAQs (Frequently Asked Questions) page. This page provides answers to common questions about AWS, including questions about pricing, security, and compliance. It's a great place to start if you're new to AWS or if you have any specific questions that you need answered.

AWS also offers a variety of case studies, whitepapers and webinars that can help you learn more about the platform and its capabilities. These resources provide real-world examples of how AWS has been used to solve problems and achieve success for other organizations. They also provide a deeper understanding of the technical and business benefits of AWS, as well as best practices for using the platform.

In addition to these resources, AWS also offers a wide range of certification programs that can help you demonstrate your expertise and skills to employers and clients. To prepare for certification, it's important to focus on the specific services and features you'll need to know for the exam. You can use the AWS documentation center, FAQs, case studies and whitepapers to learn about these services and features, as well as to practice using them.

In conclusion, AWS documentation, FAQs, case studies, white papers, and webinars are a valuable resources that can help you enhance your knowledge and prepare for certification on the AWS platform. By familiarizing yourself with these resources and making use of them, you'll be able to take full advantage of the powerful and versatile services and features offered by AWS.