Experts Share The Most Common Mistakes Developers Make and How to Avoid Them

Introduction

Being a front-end developer means you never stop learning. There’s always a better way to solve a problem; even when you think you’ve done it all, there’s more to learn. Even the most seasoned professionals never stop learning. Especially in a profession that prioritizes good user experience and where that experience is constantly changing. However, it’s hard to fix what you don’t know. But what better way to learn than from developers who have gone through it themselves?

So we ask word class web developers to give us their opinion on the most common mistakes developers make. They’ve gone through years of development, made mistakes, and learned from them. They’ve also mentored and observed what front-end developers could improve. Now, they share these words of wisdom with us all.

CopyCat

On the note of helping developers, developers made CopyCat, a plugin for developers that helps you build UI faster than your peers. Our assisted code generation gives you production-friendly React code to use and build on for your next project and skip the tedious upfront work. Below is a sample of what our tool does in the sandbox (try it out)! It’s currently out for free for you to try right now here.

---

Try the following design in a sandbox.

These tips will help take your skills to the next level. If you find this infographic helpful, could you share it with your developer team and friends?

What are the most common mistakes developers make? (Infographic)

Here’s what the experts have to say…

Upper Left Side

Krasimir Tsonev – Senior Engineer @ Antidote.me

“The front-end developers today skip the fundamentals, thinking there is a shortcut to seniority. The truth is that there are no shortcuts. HTML, CSS, and raw JavaScript should be the base, and every front-end dev should start from there.”

Radoslav Stankov – Head of Engineering @ Product Hunt

“The biggest mistake frontend developers make is not learning the programming fundamentals and patterns and being focused on the next break through the framework.

They should start with rock-solid knowledge of JavaScript and CSS and then how the browser operates in teams of DOM, Rendering, Networking, and so.”

Rob Richardson – Developer Advocate @ Shoreline.io

“The most common mistake is assuming the front-end is the entire system, and avoiding collaboration with the back-end teams. With great collaboration comes efficiency and excellence. By contrast, if you’re just flinging demands back-and-forth over the wall, you’re likely constantly in angry conversations and meetings wondering why nothing is progressing.

Another common mistake is assuming you are building something for yourself. Watch people use your products, see what inefficiencies they uncover, see what information they’re struggling to find, and build an interface that caters to their needs. I know you’ve been working on this precious creation for a long time, but if the interface is to be used by a casual audience, they don’t know all that, and you need to give them a few hints.”

Lower Left Side

Aman Mittal – Developer and Tech Writer @ Expo

“I think front-end developers is not being consistent enough when they are learning something new or practicing the what they already know to build and ship fast.

Being consistent helps you develop new skills.

I think from a developer’s perspective, you’ll find a lot of stuff about front-end development but key things like how to manage time or approaching one’s routine is not something often talked about in developer world.”

Amusa Abayomi – Fullstack Software Developer @ Elife Tech Inc

“1. Incomplete form validation

2. Missing SEO features, like image alt attribute, writing or loading javascript in the head tag without “defer” attribute and so on

3. Missing accessibility features and

4. Cross browser compatibility

5. Improper or confusing variable naming”

Smile Gupta – Frontend Engineer @ Razorpay

• “Unoptimised Project Images

Alot of times what happens in that, we are very lazy enough (including me) to visit some image compressor website, optimise my image and then use it in the project. These unoptimised leads to drop of light house scores and make websites slow for certain set of users.

• Cross Browser Compatibility

Alot of times cross-browser incompatibility issues arise when we devs focus more on functionality over design. It’s always good to switch browsers time to time to create a flawless user experience for all kind of users.

• Poor Seo Optimization

When we make projects, we do care about good coding standards and writing test cases. But we often tend to forget adding good seo. If any project will have good seo then only it will reach to many organic users.”

Upper Right Side

Harsh Patel – Senior Software Engineer @ Cygnet Infotech

“Failed to check cross devices/browser compatibility is the most common mistake by any frontend developer. In today’s time, everything is using different devices to access your web application. Apart from devices users are using different web browsers to access websites. In case you failed to provide good UI/UX then churn rate will be higher.”

Jennifer Fu – UI Tech Lead @ Domino Data Lab

“When working on a UI project, we should make the design flexible and expendable. In coding, a function is more flexible than a variable, as it can be transformed in various ways. Try to use a get method, instead of directly accessing a property. The extra effort spent on the design can be rewarded with huge time saving down the road when the ever-changing new requirements come.”

Liran Tal – Director of Developer Advocacy @ Synk

“Misplaced trust. A repeating theme across new developers who solely focus on frontend development is that of mistakenly taking for granted data and user input validation and sanitization as a task to be accomplished in the frontend. They completely miss that the backend is the actual source of truth for the data being served and saved, and the frontend is taking the role of properly providing a good UX. Similarly so, where decoupled systems are concerned, developers aren’t educated on the practice of context-aware output encoding, such that is often performed by frontend libraries like React or Vue.js. Further examples of the lack of application security education is in the face of inlining JavaScript code as part of a web page, a task which most commonly break Content Security Policies (CSP) unless mitigated correctly with a nonce.”

Lower Right Side

Aleksi Meldo – Co-founder, Head of Product and Design @ Talbit

“I’d say the most common mistake is to get too fixed on using a specific technology or framework. Front-end developers need the flexibility of knowing multiple frameworks and technologies.”

Thomas Weibenfalk – Frontend Developer, focused on React / UI Design

“I think it is very individual and experience based. So there’s really no “right” answer to this.

One thing that I’ve seen though is that devs tend to be more focused on the tech stack and using the “latest stutt” than to actually focus on what needs to be done.

There’s often complicated solutions to simple problems. Some situations, naturally, require complicated solutions but far from all times.

Especially the FE ecosystem is changing fast and there’s new stuff all the time. So choosing the right tools and stack can be troublesome sometimes.

The focus is often on creating advanced stuff that is hard to understand, rather than on actually making the code readable and structured for the human eye.

There’s not a universal common mistake and it rather depends on individual preferences and experience.”

Akshat Paul – Co-founder & CTO @ Company360

“If it has to be one common mistake which I have seen very often is the overuse of libraries in FE apps we start with a lean and clean framework but end up adding so many packages. This has a cascading effect on everything from an increase in bundle size, to slow deployment time and eventually impacting the page load. A Slow page has a direct impact on landing page experience and all your SEO goes for a toss as this bad landing page experience (with slow TTFB) cost quite a lot during ads campaign. And it all starts by adding that one package to save some time and few lines of code, without undertsanding whether that library is even mainted properly – this short change can save some time but has a huge long term impact.

As a best practice before adding any package, we must first problem-solve if its required or if there are other ways to implement the feature without any external library. Next, developers must make sure the package is well-maintained and not abandoned piece of code. Both these steps should be repeated as the project progresses to avoid any technical debt, we must revisit old code, and update or remove libraries that are no longer required – as any application progresses some times the original reason to add external dependency is not there hence we can get rid of it (of course its easier said than done in real life)”

Conclusion

If you are making some of the mistakes these developers say are common mistakes, it’s okay. Now that you know, it’s up to you to be proactive about changing some of the ways you program. We hope this article left you feeling inspired and reflective.

You can take a proactive step by trying the CopyCat plugin, which converts Figma design to code. It speeds up your development by 35% and improves the handoff process, and we let you focus on the rewarding challenges.

Thank you to all the developers who contributed to this article; your words of wisdom are very appreciated. If this guide helped you in any way, share it with your team or friends and spread the word.

Here are some articles to hone your web dev skills:

• How to Virtually Render Large Lists Using React Virtualized
• Understanding React Portals
• How to Add Toast Notifications to a React App Using React Toastify