DEV Community: Manu krishnan

Best Practices for Naming Front-End UI Elements

Manu krishnan — Wed, 05 Mar 2025 07:24:15 +0000

When naming elements on the front-end that users will see directly, the primary rule is to use clear, concise, and descriptive language that accurately reflects the element's function, avoiding jargon and technical terms wherever possible; additionally, maintain consistency in capitalization and formatting across your application.

Key points to consider:
Use plain language: Opt for words that are easily understood by your target audience, even if they are not tech-savvy.
Be specific: Choose names that accurately describe the element's purpose, avoiding overly general terms like "button" or "box."
Consider context: Take into account the surrounding elements and overall page structure when naming things to avoid confusion.
Capitalization consistency:
PascalCase: Use for titles and headings (e.g., "Submit Order").
Sentence case: For labels and short descriptions (e.g., "Enter your email").

Examples of good naming practices:
Button labels: "Save Changes", "Add Item", "View Details"
Form field labels: "First Name", "Password", "Delivery Address"
Navigation links: "Home", "About Us", "Contact"
Error messages: "Please enter a valid email", "Password cannot be blank"

What to avoid:
Technical jargon: Don't use terms like "submitForm" or "userSession" directly in user-facing elements.
Ambiguous names: Avoid "click here" or "select option" without providing clear context.
Inconsistent capitalization: Mixing up capitalization styles can be confusing.
Too many words: Keep labels short and to the point.

variable declaration in typeScript

Manu krishnan — Fri, 15 Dec 2023 09:37:38 +0000

let-const-var

let variableName: type
const constantName: type = value
var oldStyleVariableName: type

normal function

function functionName(params1: type, params2: type): returnType {

}

arrow function
const arrowfunction =(param1:type,param2:type):returntype=>{
}

enum
enum EnumName {
VALUE1,
VALUE2,
VALUE3,
}

any new knowedge please let me know in comment section

nodeMailer after google security update

Manu krishnan — Thu, 26 Oct 2023 06:18:24 +0000

Node mailer

most of them know Node mailer but with latest security update of google some of them not able to use Node mailer , Don't worry I will help you to resolve your issue ... if you are a beginer you can also follow this documentation....Let's start

step 1

install node mailer in your server

npm install nodemailer

step 2

Add this code

**const nodemailer = require('nodemailer')

const sendmail= async (req, res) => {

const { email } = req.body;

let transporter = nodemailer.createTransport({

host: "smtp.gmail.com",

port: 465,

secure: true,

auth: {

  user: "example@gmail.com",

  pass: "***",

},

});

try {

// send mail using optional parameters

var mailOptions = {

  from: "example@gmail.com",

// here you an replace email with custom email name //

  to: email,



  subject: "Type your e-mail subject here",



  html: `

  <img style="width:100px;height:40px;object-fit:contain" src="https://example/Image/example.jpeg" alt="Yourimge">

    <h2Email recciewvedlick Here  to test </h2>

  `,

};



// get the response

transporter.sendMail(mailOptions, function (error, info) {

  if (error) {

    console.log(error);

  } else {

    console.log("Email sent: " + info.response);



    return res.status(200).json({ success: true, message: info.response });

  }

});

} catch (err) {

console.log(err);

}

};
**

inside auth we need to give password i mentioned in top the google is updated the security information so we need to follow the latest updates

so follow me to get your password

You need to secure your google account with two step verification
next go to this link

** https://myaccount.google.com/apppasswords?pli=1&rapt=AEjHL4NSosO4ykDzkOiQw_CZ7_oQRKcZutIJFw7_S7zLmf5nv0GsqoTSmbNQKJ6YzDuR8DM3sUSMoXQvQ7gVeCdGXuLaZKY-dg
**

Then you add any custom name and then you will get 16 digit password copy that password

and add that password inside the auth in given code above

remember one thing email also replace with your email which created app password

(26
-10-2023)

official documentation : https://nodemailer.com/

If there is still a problem contact me :

https://https://www.linkedin.com/in/manu1305/

whatsapp :+91 8943293217