DEV Community

Nozibul Islam
Nozibul Islam

Posted on

13 7 7 7 7

New to Frontend Engineering: 8 Things To Stop Doing

New to Frontend Engineering: 8 Things To Stop Doing.

1. DON’T: Use generic tags like <div> and <span> everywhere just because it’s easy.
INSTEAD: Use semantic tags like <header>, <footer>, <article>, and <section> to give structure and meaning to your HTML. This improves accessibility and helps search engines understand your content better.

2. DON’T: Hardcode sensitive information, like API keys, directly in your code.
INSTEAD: Use environment variables for sensitive data and configure your project to access them securely. This practice keeps your information safe and easily configurable.

3. DON’T: Assume that if it works in Chrome, it works everywhere.
INSTEAD: Test your app on multiple browsers (e.g., Firefox, Safari, Edge) and devices. Browser compatibility is crucial for reaching a broader audience.

4. DON’T: Wait until you're on a team to learn Git.
INSTEAD: Start using Git from day one. Create branches, make commits, and push changes to GitHub. Version control is essential for tracking changes and collaborating effectively.

5. DON’T: Write everything from scratch for each page or section.
INSTEAD: Build reusable components for common UI elements (buttons, cards, forms). This makes your code modular, reduces redundancy, and speeds up future development.

6. DON’T: Assume that code style doesn’t matter if you’re working alone.
INSTEAD: Set up tools like ESLint and Prettier from day one. They keep your code clean, consistent, and error-free, making it easier to read and debug.

7. DON’T: Organize files randomly or without a system in place.
INSTEAD: Use a clear folder structure with organized folders for components, hooks, utilities, and styles. A well-organized project is easier to navigate and maintain, especially as it grows.

8. DON’T: Forget about mobile devices or wait until the end to make adjustments.
INSTEAD: Design and test with mobile-first principles, using responsive units (%, vw, vh) and media queries to ensure your app looks good on all screen sizes from the start.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay