soniya.rayabagi
Wed Jul 10 2024
Terraform Import :
Syntax:
Example:
#devops #TerraformImport
terraform import
allows you to bring existing resources into Terraform's state management without recreating them.Syntax:
terraform import <RESOURCE_TYPE>.<RESOURCE_NAME> <RESOURCE_ID>
Example:
terraform import aws_s3_bucket.bucket my-existing-bucket
#devops #TerraformImport
Adithya Hebbar
Wed Jul 10 2024
To create a dump of all the inserts with data and column names using
#postgres #database
pg_dump
pg_dump -U your_username -d your_database -h your_host -p your_port --column-inserts --data-only -f output.sql
#postgres #database
Sujay Prabhu
Wed Jul 10 2024
To set the autoincrement number in PostgreSQL, use the following query:
#database #postgresql
ALTER SEQUENCE "users_id_seq" RESTART WITH 1000;
#database #postgresql
soniya.rayabagi
Tue Jul 09 2024
Automating Terraform with GitHub Actions:
I learned how to automate Terraform linting, planning, and applying using GitHub Actions. This helps ensure code is always in good shape and deployed correctly. Here’s a step-by-step guide to set it up:
Steps:
• Create a
• Set up the workflow to trigger on pull requests and pushes to the main branch. This ensures that the Terraform configuration is checked and applied automatically whenever changes are made.
• Single Workflow File : By using a single
• Checkout Repository : The
• Set up Terraform : The
• Terraform Init: The
• Terraform Format : The
• Terraform Validate : The
• Terraform Plan : The
• Terraform Apply : The
#devops #Terraform #GitHubActions #HashiCorp
I learned how to automate Terraform linting, planning, and applying using GitHub Actions. This helps ensure code is always in good shape and deployed correctly. Here’s a step-by-step guide to set it up:
Steps:
• Create a
.github/workflows/terraform.yml
file in your repository. This single file defines the entire workflow for GitHub Actions.• Set up the workflow to trigger on pull requests and pushes to the main branch. This ensures that the Terraform configuration is checked and applied automatically whenever changes are made.
name: Terraform CI/CD
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
terraform:
name: Terraform Lint, Plan, and Apply
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Set up Terraform
uses: hashicorp/setup-terraform@v2
with:
terraform_version: 1.8.3
- name: Terraform Init
run: terraform init
- name: Terraform Format
run: terraform fmt -check
- name: Terraform Validate
run: terraform validate
- name: Terraform Plan
run: terraform plan
- name: Terraform Apply
run: terraform apply -auto-approve
env:
TF_VAR_user: ${{ secrets.TF_VAR_USER }}
• Single Workflow File : By using a single
.github/workflows/terraform.yml
file, I streamline the CI/CD process, making it easier to manage and maintain.• Checkout Repository : The
actions/checkout@v2
step checks out the repository so that the workflow has access to the Terraform configuration files.• Set up Terraform : The
hashicorp/setup-terraform@v2
action sets up the specified version of Terraform on the runner.• Terraform Init: The
terraform init
command initializes the working directory containing Terraform configuration files.• Terraform Format : The
terraform fmt -check
command ensures that the Terraform configuration files are properly formatted. This helps maintain a consistent coding style.• Terraform Validate : The
terraform validate
command checks the syntax and configuration of the Terraform files to ensure they are valid.• Terraform Plan : The
terraform plan
command creates an execution plan, showing what actions Terraform will take to reach the desired state. This step allows you to review changes before they are applied.• Terraform Apply : The
terraform apply -auto-approve
command applies the changes required to reach the desired state of the configuration. #devops #Terraform #GitHubActions #HashiCorp
Vaibhav Yadav
Thu Jul 04 2024
When implementing
One solution for these would be to use
Snippet:
Second solution, just in case if you're not using the react-hook-form's Controller would be using the
Happy Coding!!! 🙂
#reactHookForm #react #formValidation #zod #useEffect
password
and confirmPassword
field with react-hook-form
and zod
for validation, you might need to figure out a way to run the validation for both the fields simultaneously. With the default approach, or the simple implementation you would notice that upon updating password field, the validation for confirm password won't kick in and vice versa.One solution for these would be to use
Controller
from react-hook-form
and use superRefine
to run your validation simultaneously.Snippet:
// validation Schema
import { z } from 'zod';
// Define the schema
const schema = z.object({
password: z.string().min(8, 'Password should be at least 8 characters long'),
confirmPassword: z.string().min(8, 'Password should be at least 8 characters long'),
}).superRefine((data, ctx) => {
if (data.password !== data.confirmPassword) {
ctx.addIssue({
code: 'custom',
path: ['confirmPassword'],
message: 'Passwords do not match',
});
}
});
export default schema;
// form component
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import schema from './schema'; // Import the schema
const PasswordForm = () => {
const { handleSubmit, control, formState: { errors } } = useForm({
resolver: zodResolver(schema),
});
const onSubmit = (data) => {
console.log('Form Data:', data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Password</label>
<Controller
name="password"
control={control}
render={({ field }) => (
<input
type="password"
{...field}
placeholder="Enter your password"
/>
)}
/>
{errors.password && <span>{errors.password.message}</span>}
</div>
<div>
<label>Confirm Password</label>
<Controller
name="confirmPassword"
control={control}
render={({ field }) => (
<input
type="password"
{...field}
placeholder="Confirm your password"
/>
)}
/>
{errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}
</div>
<button type="submit">Submit</button>
</form>
);
};
export default PasswordForm;
Second solution, just in case if you're not using the react-hook-form's Controller would be using the
trigger
and touchedFields
from react-hook-form
and using react's classic useEffect
:
// component with Schema
import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
const schema = z.object({
password: z.string().min(8, 'Password should be at least 8 characters long'),
confirmPassword: z.string().min(8, 'Password should be at least 8 characters long'),
}).superRefine((data, ctx) => {
if (data.password !== data.confirmPassword) {
ctx.addIssue({
code: 'custom',
path: ['confirmPassword'],
message: 'Passwords do not match',
});
}
});
const PasswordForm = () => {
const { handleSubmit, register, trigger, formState: { errors, touchedFields } } = useForm({
resolver: zodResolver(schema),
});
const onSubmit = (data) => {
console.log('Form Data:', data);
};
useEffect(() => {
if (touchedFields.password) {
trigger('password');
}
}, [trigger, touchedFields.password]);
useEffect(() => {
if (touchedFields.confirmPassword) {
trigger('confirmPassword');
}
}, [trigger, touchedFields.confirmPassword]);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Password</label>
<input
type="password"
{...register('password')}
placeholder="Enter your password"
/>
{errors.password && <span>{errors.password.message}</span>}
</div>
<div>
<label>Confirm Password</label>
<input
type="password"
{...register('confirmPassword')}
placeholder="Confirm your password"
/>
{errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}
</div>
<button type="submit">Submit</button>
</form>
);
};
export default PasswordForm;
Happy Coding!!! 🙂
#reactHookForm #react #formValidation #zod #useEffect
soniya.rayabagi
Wed Jul 03 2024
To connect to the PostgreSQL RDS instance using psql:
where, ${postgres_host}: variable representing the PostgreSQL host or db
#devops #PostgreSQLConnection #rds
psql -h ${postgres_host} -U "${postgres_username}" -d ${postgres_database} -W
where, ${postgres_host}: variable representing the PostgreSQL host or db
endpoint
#devops #PostgreSQLConnection #rds
soniya.rayabagi
Tue Jul 02 2024
Install powerful monitoring tools, Grafana and Prometheus
Grafana:
• Install with Homebrew:
• Start the service:
• Access at https://localhost:3000 (default login: admin/admin)
• Stop the service:
Prometheus:
• Install with Homebrew:
• Configure prometheus.yml:
where -> scrape_interval: 10s: Prometheus will collect metrics from all defined targets every 10 seconds.
scrape_configs: This section defines how Prometheus should scrape metrics from targets.
• Start with configuration:
• Access at https://localhost:9090
#devops #grafana #prometheus
Grafana:
• Install with Homebrew:
brew install grafana
• Start the service:
brew services start grafana
• Access at https://localhost:3000 (default login: admin/admin)
• Stop the service:
brew services stop grafana
Prometheus:
• Install with Homebrew:
brew install prometheus
• Configure prometheus.yml:
global:
scrape_interval: 10s
scrape_configs:
- job_name: 'prometheus'
static_configs:
- targets: ['localhost:9090']
where -> scrape_interval: 10s: Prometheus will collect metrics from all defined targets every 10 seconds.
scrape_configs: This section defines how Prometheus should scrape metrics from targets.
• Start with configuration:
prometheus --config.file=prometheus.yml
• Access at https://localhost:9090
#devops #grafana #prometheus
Giritharan
Mon Jul 01 2024
overscroll-behavior in CSS
The
overscroll-behavior
CSS property controls what happens when you reach the boundary of a scrollable area. It's useful for managing scroll chaining and preventing unwanted browser behaviors like the "bounce" effect or "pull to refresh."Usage
- Default (auto): Normal scroll behavior.
- Contain: Stops scroll chaining; keeps default behavior within the element.
- None: Prevents both scroll chaining and the default overflow behavior.
Examples
Prevent underlying content from scrolling:
.scroll-container {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
}
Disable overscroll effects:
html {
margin: 0;
overscroll-behavior: none;
}
#css #alignment-issue #frontend
Ashwani Kumar Jha
Tue Jun 25 2024
Beacon API
Reliable way to send asynchronous data to a server, especially during page unload events. The Beacon API lets us send small amounts of data asynchronously and non-blockingly to a server. Unlike traditional solution like
Reliable way to send asynchronous data to a server, especially during page unload events. The Beacon API lets us send small amounts of data asynchronously and non-blockingly to a server. Unlike traditional solution like
fetch
, the Beacon API ensures that the data is sent before the page unloads and runs to completion. The browser ensures that the request is initiated before the page is completely unloaded. This includes scenarios where the user closes the tab, navigates to another page, or reloads the page. The primary goal is to deliver the data reliably. The browser ensures that the data transfer completes before the document is discarded.
window.addEventListener('beforeunload', () => {
const data = JSON.stringify({ userId: '12345' });
navigator.sendBeacon('/logout', data);
});
Adithya Hebbar
Tue Jun 25 2024
In JavaScript,
So, when you run this code, you'll see something like: "myTimer: 1.358ms"
#javascript
console.time
is a method that helps you measure the time it takes for a specific block of code to execute. It's like a stopwatch for your code.
// Start the timer
console.time('myTimer');
for (let i = 0; i < 1000000; i++) {
// Some code here
}
// Stop the timer
console.timeEnd('myTimer');
So, when you run this code, you'll see something like: "myTimer: 1.358ms"
#javascript
Showing 11 to 13 of 73 results