DEV Community: Aidan

Why Developers Should Try Warp: The Terminal That Boosts Your Productivity

Aidan — Fri, 20 Dec 2024 23:05:05 +0000

Introducing Warp Terminal

https://www.warp.dev/

Warp is a modern terminal designed to enhance the command-line experience. With a user-friendly interface, outstanding features, and performance boosts, Warp brings a fresh perspective to developers, especially those who frequently work with terminals. Here's what makes Warp a standout choice.

Key Features of Warp

🚀 Modern and User-Friendly Interface

Warp is not only visually appealing but also highly intuitive. It offers:

Command Blocks: Each command's output is neatly encapsulated in its own block, making it easier to manage and review.
Advanced Search: Quickly search through command history and output.

⚡ Productivity Tools

Warp empowers you to work smarter with:

Intelligent Autocomplete: Real-time suggestions for commands and arguments.
Sharable Snippets: Save and share useful command snippets with your team.
Built-in Editor: Edit files or configurations directly in the terminal without switching apps.

🤝 Robust Collaboration Support

One of Warp's standout features is its collaboration capabilities:

Live Collaboration: Share terminal sessions live with teammates.
Command Annotations: Document your steps to easily share knowledge.

🧠 AI Integration

Warp leverages AI to enhance user experience with:

AI Command Suggestions: Automatically suggests relevant commands based on context and history.
Error Explanations: Analyzes and explains command errors for quick troubleshooting.
AI-Powered Documentation: Enables you to search for documentation and get command explanations directly in the terminal.

🔗 Integration with Modern Tools

Warp offers built-in support for popular tools and platforms like Git, Docker, Kubernetes, AWS, and GCP, eliminating the need for complex setups.

🛡️ High Performance and Security

Written in Rust, Warp delivers exceptional performance. It also ensures security for sensitive data with encryption and robust protection mechanisms.

Why Use Warp Terminal?

✅ Boost Productivity

Warp helps you get work done faster with features like autocomplete, efficient search, and organized command history. Command Blocks ensure you never lose track of important outputs.

✅ Easy to Learn and Use

Even for those new to terminals, Warp provides an accessible experience with its intuitive interface and smart assistance features. Sharable snippets make it easier to learn from teammates.

✅ Better Team Collaboration

For those who work in teams, Warp’s live collaboration and session-sharing features are excellent tools for discussion and problem-solving.

✅ Built for Modern Developers

With integrations for DevOps and cloud tools, Warp is not just a terminal but a productivity hub for modern developers.

✅ Foster Creativity and Exploration

Warp encourages you to discover new commands through suggestions and advanced features, saving time and expanding your knowledge.

Conclusion

Warp Terminal is a game-changer for developers seeking a modern, efficient, and user-friendly command-line tool. With features like Command Blocks, intelligent autocomplete, AI integration, and collaboration tools, Warp is more than just a terminal—it's a productivity companion for your daily tasks.

🌟 Try Warp Terminal now and experience the difference! 🌟

What is the Commit line? How to use commit line for project

Aidan — Tue, 03 Dec 2024 03:17:32 +0000

What is a Commit Line?
A commit line is a concise message you provide when making a commit in version control systems like Git. It explains the purpose or the changes introduced in the commit.

A good commit line should be short, precise, and easy to understand, allowing anyone in the project to grasp the essence of the changes.

Use a standardized syntax (Conventional Commits): Adopt prefixes to categorize the type of commit:

"options": [
        {
          "label": "---",
          "value": ""
        },
        {
          "label": "build",
          "description": "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)"
        },
        {
          "label": "chore",
          "description": "Updating grunt tasks etc; no production code change"
        },
        {
          "label": "ci",
          "description": "Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)"
        },
        {
          "label": "docs",
          "description": "Documentation only changes"
        },
        {
          "label": "feat",
          "description": "A new feature"
        },
        {
          "label": "fix",
          "description": "A bug fix"
        },
        {
          "label": "perf",
          "description": "A code change that improves performance"
        },
        {
          "label": "refactor",
          "description": "A code change that neither fixes a bug nor adds a feature"
        },
        {
          "label": "revert"
        },
        {
          "label": "style",
          "description": "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)"
        },
        {
          "label": "test",
          "description": "Adding missing tests or correcting existing tests"
        }
      ],

When you run git change log it will look like below

How to use commit line for project
We hope that when committing in the wrong format, an error message will be reported

Package needs to be installed

yarn add -D @commitlint/cli
yarn add -D @commitlint/config-conventional
yarn add -D @commitlint/load
yarn add -D husky
yarn add -D lint-staged

You need commit link reference
https://bitbucket.org/main-28/commitline/commits/7fb8faaf2ed576fca80007bf099fe85f526e5605

Full source code:
https://bitbucket.org/main-28/commitline/src/main/

Prevent email spam from developers during application development

Aidan — Fri, 23 Aug 2024 01:29:44 +0000

hi everybody!

Today I share some issues I have encountered, it isn't very pleasant

The issue:

When clicking submit, the screen of new employees will call send mail to list users has the role admin and manager. I'm a newbie joining a project, i run the project at my local and test this screen
So...., that day, everyone who has participated in the project, current team members and members who have moved to other projects, and members who have left. They received a lot of emails from my testing activities because I cloned the database from the development environment to my local and the database already had their information.
Everyone sympathized with my actions. But I think I need to improve more

so I will introduce to everyone this great tool mailtrap

Mailtrap working

My Inbox:

SMTP info

Test send email with SMTP
https://www.gmass.co/smtp-test

You check Demo Inbox Mailtrap WOA :D
Email header info consit from, to, ...

With mailtrap i can test this screen :D

How to define class name with color code

Aidan — Mon, 05 Aug 2024 06:48:21 +0000

I used to be quite confused when naming elements by color code.

Example issues:
This panel default has a background white
<div class="panel">default</div>

This panel default has a background #757575
<div class="panel panel__???">#757575</div>

This panel default has a background #cdcdcd
<div class="panel panel__???">#cdcdcd</div>

OMG! How do I name panel__??? class elements

I recommend https://colors.artyclick.com/color-name-finder/ it solves naming

This case:
This panel default has a background #757575
<div class="panel panel__???">#757575</div>

Solved:
you can reference Name or Similar names
results
<div class="panel panel__boulder">#757575</div>

Link:
https://colors.artyclick.com/color-name-finder/

Authentication opens a new window popup with postMessage

Aidan — Fri, 10 May 2024 09:05:51 +0000

Diagram:

When you have a large system with many services, each service is responsible for a specific task, and there is an authentication service that provides authentication for many [app client] applications in use, then you will be interested in postMessage or Single sign-on solutions.

This article will focus on postMessage

Solution 1: postMessage with iframe
Page parents use HTML tag iframe to load the child page.

Demo

Page parent sends a message to page child via iframe
Page child sends a message to page parent via iframe

Solution 2: postMessage with new window popup
Page login on [app client] call open new window load page login of service [A], service [A] login success send message container token data to go back [app client]

Demo

Open a new window
Click the button [Login success]: Send message go back [app client]

Repo: https://bitbucket.org/main-28/authencation-with-window-open/src/main/

Install the package with package json npm i

Run the script locally:

Solution 1(iframe)

Step 1:
npm run postMessage:iframe1
npm run postMessage:iframe2

Step 2: 
Open http://localhost:8081

Solution 2(new window)

Step 1:
npm run postMessage:case2:window1
npm run postMessage:case2:window2

Step 2: 
Open http://localhost:8085

Migration - Module query with TypeORM version 0.3.x

Aidan — Wed, 03 Apr 2024 06:21:12 +0000

Hi everyone!!

I like to use the library TypeORM •ᴗ••ᴗ••ᴗ••ᴗ•
As usual, When stating new project, i typically copy the database modules & config script migration from the old source. However, with TypeORM version 0.3.x, it doesn't seem to work. ¯_(ツ)/¯ ¯_(ツ)/¯ ¯_(ツ)_/¯
I have researched and felt confused while applying TypeORM to the project.

So, I want to share it with everyone.

Prepare:

New app with nestjs
Install yarn add mysql2 typeorm @nestjs/typeorm

Repository
https://bitbucket.org/main-28/typeorm-migration-0.3/src/main/

Setup database module

.
├── src/
│   ├── database/
│   │   ├── migrations # This folder contains migrate file
│   │   ├── data-source-migration.ts # This file config run migration create, run, ...
│   │   └── database.module.ts # This file config query to database
│   └── app.module.ts
└── package.json

Config package json file

"typeorm": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli",
"migration:create": "yarn typeorm migration:create ./src/database/migrations/${name}",
"migration:create:window": "yarn typeorm migration:create ./src/database/migrations/%name%",
"migration:run": "yarn typeorm -- --dataSource=./src/database/data-source-migration.ts migration:run",
"migration:revert": "yarn typeorm -- --dataSource=./src/database/data-source-migration.ts migration:revert",

File name format
This format would help you and the team quickly understand what someone has edited.
Please provide feedback on this format for me.

- Create: create-{table-name}-table
- Modify > 1: modify-{modify-name}-{table-name}-table
- Modify = 1: add-{field-name}-{table-name}-table
- Modify = 1: update-{field-name}-{table-name}-table
- Modify = 1: delete-{field-name}-{table-name}-table

Short script

Create table post name=create-post-table yarn migration:create
Run migration yarn migration:run

Cognito custom flow sign-in sends a confirm code via email

Aidan — Fri, 29 Mar 2024 08:54:46 +0000

Hi every one!!!

Emotional conversation between boss and employee

Boss: Do you know about Cognito?
Employee: I know a lot about it so what do you need?
Boss: I need to develop more on the login page about 2fa confirmation codes via email & email only, customers need it urgently.
Employee: I think Cognito has all the support so no need to worry. I talked to my boss about it and assured me that I could do everything.
Boss: Does it take a long time?
Employee: I'm a master at this so it'll be quick.

So then he discovered the flow login feature only supports mfa with TOTP & SMS

OMGGGGGGG ●█▀█▄ ●█▀█▄ ●█▀█▄ ●█▀█▄

Please read this article it will help you ＼ʕ •ᴥ•ʔ／

AWS
https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-lambda-challenge.html

Flow basic

Prepare:

Cognito create user pool
Create 3 lambda function: 2faDefine.js, 2faCreate.js, 2faVerify.js

Cognito user pool

Note: User pool ID & App client ID

1./ Tab User: create user

The newly created user has confirmation status is Force change password, now you need to run the script below to update confirmation status from Force change password to Confirmed.

aws cognito-idp admin-set-user-password --user-pool-id {user pool ID} --username {username} --password {password} --permanent

2./ Tab Sign-up experience

Add custom attributes authChallenge, so after saving it will automatically add the prefix custom:, ouput custom:authChallenge.

This custom attribute contains a confirmation code and expiration time information when the end user submits a login.

3./ Tab App integration

You find App client list, so click Client your app.

This custom attribute custom:authChallenge must have read and write permissions.

Option Authentication flow session duration has a value equal to the expiration time of the confirm-code.

Option Authentication flows has a value ALLOW_ADMIN_USER_PASSWORD_AUTH, ALLOW_CUSTOM_AUTH, ALLOW_REFRESH_TOKEN_AUTH, ALLOW_USER_PASSWORD_AUTH, ALLOW_USER_SRP_AUTH.

4./ Tab User pool properties

Add Lambda trigger with trigger type

Custom authentication

Custom authentication

Choose Define auth challenge mapping to lambda function 2faDefine.
Choose Create auth challenge mapping to lambda function 2faCreate.
Choose Verify auth challenge response mapping to lambda function 2faVerify.

Lambda deploy with code
1./ Function 2faDefine
https://bitbucket.org/main-28/cognito-sign-in-confirm-code-via-email/src/main/2faDefine.js

2./ Function 2faCreate
https://bitbucket.org/main-28/cognito-sign-in-confirm-code-via-email/src/main/2faCreate.js

Tab Configuration > General configuration

Change value of the option timeout up 5 minute because nodemailer send email not working.

Tab Configuration > Environment variables

CUSTOM_ATTRIBUTES = custom:authChallenge
EMAIL_FROM_ADDRESS = xxxxx@xxxxxxxxx.xxx
USER_POOL_ID = xxxxxxxxx

3./ Function 2faVerify
https://bitbucket.org/main-28/cognito-sign-in-confirm-code-via-email/src/main/2faVerify.js

Tab Configuration > Environment variables

CONFIRM_CODE_TIMEOUT = 15
CUSTOM_ATTRIBUTES = custom:authChallenge

Frontend Angular

Libary [amazon-cognito-identity-js](https://www.npmjs.com/package/amazon-cognito-identity-js), [angular-code-input](https://www.npmjs.com/package/angular-code-input)
Git: https://bitbucket.org/main-28/cognito-sign-in-confirm-code-via-email/src/main/login.component.ts

Form login: when the end user clicks submit, it will call the function onSubmitLogin.
Form confirm code: when the end user enters the confirm-code, it will call the function onCodeCompleted.

Note:

If you want to refactor code, make sure the code example works first.
Please comment any issues you encounter and I will try to answer you.

How to fix the error node_modules/node-sass command failed

Aidan — Fri, 29 Mar 2024 04:14:14 +0000

Hello everyone!

On a beautiful day,
I up to node the latest version of the project
After checking the package version, api, code, and everything is fine (◍•ᴗ•◍)

Until I build the assets files scss.......
this is the error ヽ༼ ͠ಠل͜ ಠ ༽ﾉ

AI suggested this and it works, if you are having this problem, try it
Trust AI, trust me, trust us
･°˖✧◝(⁰▿⁰)◜✧˖°.

The error message suggests that there's a problem with the node-sass module during the npm install process.
Specifically, it seems to be related to the build process failing with error code 1.
This issue is often caused by using a version of node-sass that is not compatible with the version of Node.js being used.

To resolve this issue, you can try the following steps:

- Delete the node_modules directory and the package-lock.json file in your project.
- Run npm cache clean --force to clear the npm cache.
- Upgrade node-sass to the latest version by running npm install node-sass@latest.
- Run npm install again to reinstall your project's dependencies.

If the issue persists, you can try uninstalling node-sass and using the sass module instead, which is a drop-in replacement for node-sass.

To do this, run the following commands:

npm uninstall node-sass
npm install sass