teleren/devto huggingface dataset:
Server-Side Rendering (SSR) in Angular 16
Tags: angular, typescript, webdev, javascript
Published: 2023-07-18 12:51:11

Server-side rendering (SSR) is a technique for rendering web pages on the server before sending them to the client. This has a number of benefits, including:

* Improved SEO: Search engines can index the rendered pages, which can improve your website's search engine ranking.
* Faster initial load times: The rendered pages are already loaded when the client receives them, so the initial load time is much faster.
* Better performance on mobile devices: SSR can improve the performance of your website on mobile devices, which is important for a growing number of users.

Angular 16 has made significant improvements to SSR, making it easier to implement and more performant. In this article, we will take a look at the basics of SSR in Angular 16 and how to get started.

**What is SSR in Angular?**

In Angular, SSR is implemented using the `@nguniversal/express-engine` package. This package allows you to render your Angular application on the server using Express, a popular web framework.

To use SSR in Angular, you need to do the following:

1. Install the `@nguniversal/express-engine` package.
2. Enable SSR in your Angular application.
3. Configure Express to serve your Angular application.

**Enabling SSR in Angular**

To enable SSR in your Angular application, you need to add the following to your `app.module.ts` file:

```
import { enableServerSideRendering } from '@nguniversal/express-engine';

@NgModule({
  ...
  providers: [
    enableServerSideRendering(),
  ],
  ...
})
export class AppModule {}
```

This will enable SSR for your Angular application.

**Configuring Express to serve your Angular application**

Once you have enabled SSR in your Angular application, you need to configure Express to serve your application. You can do this by creating a new file called `server.js` and adding the following code:

```
const express = require('express');
const app = express();
const port = 3000;

app.engine('html', require('@nguniversal/express-engine').render);
app.set('view engine', 'html');
app.set('views', __dirname + '/dist');

app.get('/', (req, res) => {
  res.render('index.html');
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});
```

This code will start an Express server on port 3000 and serve your Angular application.

**Testing SSR in Angular**

To test SSR in Angular, you can start the Express server and then navigate to `http://localhost:3000` in your browser. You should see the rendered version of your Angular application.

**Conclusion**

SSR is a powerful technique that can improve the performance and SEO of your Angular applications. In Angular 16, SSR has been made easier to implement and more performant. If you are looking for ways to improve the performance of your Angular applications, SSR is a good option to consider.

I hope this article has been helpful. If you have any questions, please feel free to leave a comment below.
Are you a company in need of #VueJS expertise?
Tags: vue, programming, development
Published: 2023-07-18 12:35:53

Save time and #find qualified VueJS #developers effortlessly with Devler.io. Direct connecting with #skilled VueJS #engineers has never been that easy. Let’s unlock new possibilities for your #projects with our Dev’s Network. 

**[](https://devler.io/hire-vue-developers)**
Automate Printing Documents – Python Script
Tags: automate, printing, documents, python
Published: 2023-07-18 12:25:47

Have you ever been fed up finding a specific file, opening it and then printing it. Do you want to Automate this process just opening a python script writing a name of the file and the computer will automate printing the document for you? If your answer is yes, Just read this blog till the last and you can automate your work. I will write a Python Program which opens and Prints the document. You just need to know the name of the file you wanna print.

Read the Full Article : https://hecodesit.com/automate-printing/
GFS2 Filesystem setup in RHEL8 with Pacemaker and Corosync
Tags: cloud, webdev, devops, systems
Published: 2023-07-18 12:19:42

We will configure Pacemaker/Corosync to enable the sharing of a disk between two nodes through the GFS2 clustered filesystem.


https://bidhankhatri.com.np/system/gfs2-filesystem-setup-in-rhel8-with-pacemaker-and-corosync/
Netmaker - WireGuard Made Easy
Tags: security, vpn, networking, network
Published: 2023-07-18 12:15:46

If you've worked much in networking, you've probably heard of WireGuard®. If not, allow me to introduce it.

[WireGuard](https://www.wireguard.com/) is a VPN protocol developed several years ago which is exremely fast, lightweight, and uses state-of-the art cryptography. Its performance blows legacy VPN's out of the water.

![Shaq likes WireGuard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hug99tu3eac2ob2k6bz.gif)

A lot of people stumble upon WireGuard when they're looking to:
a) Build their own VPN
b) Set up remote access
c) Build a site-to-site network

The thing is, WireGuard can also be a little complicated to manage at scale. When you set up your network, you may find packets aren't going through, and you don't know why.

![Orangutan is confused by WireGuard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5dite9e5slcwtkigcr1.png)

It gets more complicated the more you have to do. Route traffic to a private network? Set up roaming? Get around a NAT or Firewall? Your number of open tabs starts to increase exponentially.

Enter Netmaker.

Netmaker is a VPN platform built on WireGuard®, that lets you create any sort of network you might be looking to set up. Remote access? Sure thing. Inter-VPC overlay network? No problem.

Netmaker manages the hard parts of setting up a WireGuard network, including peer discovery, routing, key distribution, endpoint changes, and more.

Netmaker is easy to get started with. You can [sign up here for free](https://app.netmaker.io), or, if you're into self-hosting, check out the [GitHub](http://github.com/gravitl/netmaker). 

Then you're off to the races. [Here's a tutorial to help get you started](https://www.netmaker.io/tutorials#quick-start). 

In summary:

![No more panik with Netmaker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfm5bkqgiqnnqzyeq3ca.png)
My Journey to AWS Solution Architect Professional Certification: Tips for Success
Tags: aws, architecture, certification, professional
Published: 2023-07-18 12:15:32

**Introduction**
Starting the journey to become an AWS Solution Architect Professional can be challenging but highly rewarding. In this blog post, I will share my personal experience and provide valuable tips and strategies for successfully obtaining the AWS Solution Architect Professional certification.

**Understanding the Certification and Its Value**
To begin your journey, it's essential to grasp the significance of the AWS Solution Architect Professional certification. This certification validates your expertise in designing and deploying scalable, secure, and fault-tolerant applications on AWS. It opens doors to exciting career opportunities and demonstrates your proficiency in architecting AWS solutions at an advanced level.

**Mastering AWS Services and Architecture**
Building a solid foundation in AWS services and architecture is crucial. Gain an in-depth understanding of core AWS services such as EC2, S3, RDS, and VPC. Learn how to architect highly available, scalable, and cost-effective solutions using these services. Familiarize yourself with AWS architectural best practices, including security, performance, and reliability considerations.

**Creating an Effective Study Plan**
Developing a well-structured study plan is key to your success. Set clear goals and objectives, and allocate dedicated study time. Identify your strengths and weaknesses, and focus on areas that require more attention. Break down the exam objectives into manageable sections and create a timeline to cover all the necessary topics.

**Practical Hands-On Experience**
Theory alone is not enough to succeed in the AWS Solution Architect Professional exam. Gain practical experience by working on real-world projects and use cases. Apply your knowledge to design and implement solutions using AWS services. This hands-on experience will help you understand the practical application of AWS services and reinforce your understanding of architectural concepts.

**Leveraging Study Resources**
Take advantage of a variety of study resources available to enhance your preparation. Dive into AWS whitepapers and documentation, which provide detailed insights and best practices. Explore official AWS training courses, which cover exam objectives and offer practical exercises. Supplement your learning with third-party resources such as books, online courses, and practice exams to reinforce your understanding and identify areas that need improvement.

**Conclusion**
Obtaining the AWS Solution Architect Professional certification requires a combination of knowledge, hands-on experience, and effective study strategies. By understanding the certification's value, mastering AWS services and architecture, creating a study plan, gaining practical experience, and leveraging study resources, you'll be well-prepared to tackle the exam. Remember to stay focused, persevere through challenges, and continuously assess your progress. Good luck on your journey to becoming an AWS Solution Architect Professional!
Apache AGE Installation
Tags: edb, apacheage
Published: 2023-07-18 12:11:13


**Brief Introduction:**
If you are about to install PostgreSQL and Apache AGE on a Windows machine in a step-by-step manner, then this is the right post for you. This post will help you to have a fully functional Apache AGE graph & PostgreSQL, ready to use application.

**PostgreSQL**:It is the one of the famous open-source database management system refer to as simply "Postgres". It is designed to handle a wide range of workloads, from single-machine applications to large-scale enterprise databases.

## **Apache AGE** 
Apache AGE (Advanced Graph Extensions) is a graph database that is built on top of Postgres SQL. AGE allows you to store, query, and analyze graph data using familiar SQL syntax and the PostgreSQL ecosystem.

---

**Installation Guidelines:**
There is a step-by-step guide to installing Apache AGE (Advanced Graph Extensions) on a Linux-based system, specifically Ubuntu:

## Step 1: Install PostgreSQL
Open terminal & run the following command

```
sudo apt-get update
sudo apt-get install postgresql
```


## Step 2: Dependencies Installatio**
Run the following command in the terminal

```
sudo apt-get install libpq-dev build-essential git

```
## Step 3: Cloning Apache AGE Repository
https://github.com/apache/incubator-age.git

```
git clone https://github.com/apache/incubator-age.git

```
## Step 4: Downloading & Installing AGE
```
cd age/

# install
sudo make PG_CONFIG=/home/<your pc name>/age_installation/pg/postgresql-11.18/bin/pg_config install

# install check
make PG_CONFIG=/home/<your pc name>//age_installation/pg/postgresql-11.18/bin/pg_config installcheck
```

Note: PG_CONFIG require the path to the pg_config file. Give the path from the recently installed PostgreSQL.


## Step 5: Configuration of Apache AGE

```
sudo nano /etc/postgresql/<postgresSQL version>/main/postgresql.conf

```
Add `shared_preload_libraries = 'age'` to enable Apache AGE.

## Step 6: Starting Postgres SQL 

```
sudo service postgresql restart

```
Verify the installation `SELECT age_version();`
If Apache AGE is installed properly, it will show the version information.

If you are done with all the above steps then you are successful in installing ApacheAGE on your Ubuntu. 

Good luck with that...
Granular Permission Management with CASL Library
Tags: casl, javascript, auth, programming
Published: 2023-07-18 12:09:22

## Managing permission for complex applications is too… complex

**User permissions management** is one of the biggest challenges for complex applications. With multiple users working on different aspects, it is important to ensure that each user has the appropriate level of access to the data they need to do their job. Access control becomes an even bigger issue when the **roles keep on changing as the application grows**, especially in **large organizations with complex hierarchies** and multiple user roles.

Here's how we set up granular project management in a **Metrics Tool** application.

### What is a Metrics Tool?

It is an essential **platform for IT project management** that allows users to monitor and evaluate the performance of various IT projects. The tool provides insights and metrics on project progress and other critical parameters, enabling businesses to make data-driven decisions.

## Granular permissions with CASL library

This is where the **CASL library** comes into play.

CASL is a library for managing user permissions and access control in JavaScript applications. It provides a **flexible and powerful** way to define user roles and permissions and to enforce those permissions across the application.

With the CASL library, administrators can **define granular permissions for different user roles**, ensuring that users only have access to the features and data they need to perform their tasks. For example, project managers may have access to all project metrics, while team members may only be able to view metrics related to their specific projects.

![Granular Permission Management with CASL Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lyp9p15gkumgc7udu3p.png)

## CASL Library in action

By using the CASL library in the Metrics Tool project, organizations can ensure that their **data is secure** and that users have **access to the right information**, resulting in better decision-making and improved project outcomes.

```tsx
import { AbilityBuilder, createMongoAbility } from '@casl/ability';
import { User } from '../models' // application specific interfaces

function defineAbilitiesFor(user: User) {
  const { can, cannot, build } = new AbilityBuilder(createMongoAbility);

  // can read blog posts
  can('read', 'BlogPost');
  // can manage their own blog posts
  can('manage', 'BlogPost', { author: user.id });
  // cannot delete published blog posts that where created more than a day ago
  cannot('delete', 'BlogPost', { 
    isPublished: true, 
    createdAt: { 
      $lt: Date.now() - 24 * 3600 * 1000 
    } 
  });

  return build();
}
```
How To add a new font on macOS?
Published: 2023-07-18 11:56:11

To add a new font on macOS, you can follow these steps:

1. **Download the font:** Find a trusted source where you can download the font file (usually in TTF or OTF format) to your Mac.
[Download Font](https://www.freefontdownload.org/) 

2. **Open Font Book:** Font Book is the built-in font management tool on macOS. You can find it by going to the "Applications" folder or by using Spotlight search (press Command + Space and type "Font Book").

3. **Install the font:** In Font Book, go to "File" in the menu bar and select "Add Fonts" or simply drag and drop the downloaded font file into the Font Book window. 

4. **Verify and organize the font:** Font Book will open the font file and display a preview. You can scroll through the font variations and check if everything looks as expected. Optionally, you can add the font to specific collections or create new ones to organize your fonts.

5. **Install for all users (optional):** By default, Font Book installs fonts for the current user only. If you want to make the font available for all users on your Mac, select the font in Font Book and go to "File" > "Validate Font" in the menu bar. Once the validation is complete, click the "Install Checked" button to install the font system-wide.

6. **Restart applications:** After installing the font, you may need to restart any applications (such as word processors or design software) that were already running in order for them to recognize and use the newly installed font.

Once the font is successfully installed, you should be able to use it in any application that supports font selection.
My first project as Software developer
Tags: webdev, javascript, beginners, programming
Published: 2023-07-18 11:45:27

Hello again, this is my second post, I want share for you my first project as web developer. 
Exactly is a crud with database and an front end maded with React, this project was amazing but at the same time was UGLY/Stressful for my first time, because was very complicated. To get the achievements I used my team a little bit.
This is the code: https://github.com/fpadularrosa/PI_Food_Main
Best Clipping Path Service Company
Tags: clipping, clippingpath, graphicdesign
Published: 2023-07-18 11:32:45

Clipping Path Dhaka (CPD) is a leading provider of high-quality **[clipping path services](https://clippingpathdhaka.com/)**. We specialize in providing 100% accurate solutions to clients in the photo studios, modeling, fashio
![Uploading image](...)n, and product photography industries, as well as prepress and printing companies. Our skilled team of proto editors is highly knowledgeable and can provide exact solutions instantly.
Drawbacks of IP whitelist
Tags: scaling, security
Published: 2023-07-18 11:17:40

At Woovi we think a lot about any tiny decision, and how it can impact our business and product in the short and long term.

One common request from our users it to be able to whitelist a set of IP, or an IP range to protect their Webhook callback endpoints that receive notification of a new payment received.

Providing a fixed set of IP for our users would cause a lot of drawbacks when scaling our services.

## Drawbacks of IP whitelist

Imagine we have a list of fixed IPs, and we need to change them in the future. We would need to notify all our users to modify their IP whitelist to add the new IPs. For the ones that didn't modify in a timely fashion, it would break their payment integrations, causing a lot of customer support requests.

Another drawbacks of a fixed set of IPs are that they are easily target for hacker attacks.

## A more robust approach 

Security is non-negotiable for us.
Our users still need to validate if the payment confirmation notification comes only from Woovi servers.
To make this possible we sign all Webhooks notifications using our private key.
And user servers validate each request using Woovi Public Key.
This approach also ensure the payload was not tampered.

Below is a sample JavaScript code that can be used to validate a webhook payload.

```jsx
import crypto from 'crypto';

const algorithm = 'sha256';
const signatureFormat = 'base64';

export const verifyPayload = (payload, signature) => {
  const publicKey = Buffer.from(WOOVI_PUBLIC_KEY_BASE64, 'base64').toString('ascii');

  const verify = crypto.createVerify(algorithm);

  verify.write(Buffer.from(payload));
  verify.end();

  const isValid = verify.verify(publicKey, signature, signatureFormat);

  return isValid;
};
```

Here is our Public Key

```shell
-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC/+NtIkjzevvqD+I3MMv3bLXDt
pvxBjY4BsRrSdca3rtAwMcRYYvxSnd7jagVLpctMiOxQO8ieUCKLSWHpsMAjO/zZ
WMKbqoG8MNpi/u3fp6zz0mcHCOSqYsPUUG19buW8bis5ZZ2IZgBObWSpTvJ0cnj6
HKBAA82Jln+lGwS1MwIDAQAB
-----END PUBLIC KEY-----
```

## In Conclusion

Using a Private/Public key validation is simpler than doing IP whitelist or using HMAC.
We are adding the signature validation check to our all SDKs to make our users integration easier than ever.
We also want to make it easy to add this validation for most common firewall solutions like Cloudflare.

---
Woovi
[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/@scottrodgerson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Scott Rodgerson</a> on <a href="https://unsplash.com/photos/PSpf_XgOM5w?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Terraform AWS module for an eventbridge rule
Published: 2023-07-18 11:14:21

```
module "end_to_end_recon_time_eventbridge" {
  source               = "terraform-aws-modules/eventbridge/aws"
  create_bus           = false
  role_name            = "${var.env}-end-to-end-recon-time"
  attach_lambda_policy = true

  rules = {
    "${var.env}-end-to-end-recon-time" = {
      description         = "Trigger lambda that computes end to end reconciliation time"
      schedule_expression = "rate(10 minutes)"
    }
  }

  targets = {
    "${var.env}-end-to-end-recon-time" = [
      {
        name  = "end-to-end-recon-time"
        arn   = module.end_to_end_recon_time_lambda.arn
        input = jsonencode({ "job" : "cron-by-rate" })
      }
    ]
  }

  lambda_target_arns = [module.end_to_end_recon_time_lambda.arn]

  tags = {
    Name = "${var.env}-end-to-end-recon-time"
  }
}
```
How to encode and decode file to base64 offline
Tags: todayilearned, productivity, tooling
Published: 2023-07-18 11:04:30

Although there are a number of websites that allow to convert file to base64 and vice versa. However, it could leads to data leak issue if these data from your working project.

Therefore, I would like to introduce a tip to convert file to base64 (and vice versa) offline.

###1) Encode file (ex: pdf) to base64:
`base64 -w 0 test1.pdf`

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

###2) Encode a file to base64 and write it to file:
`base64 -w 0 test1.pdf > test1.txt`


###3) Decode base64 to file:
`base64 -d test1.txt > test1.pdf`

Tool need to use:
1. Linux: use the default cmd
2. Window: use the git bash which I believe all the developers already installed