We all made mistakes when we were new to web development. Mistakes are meant to be made because we can learn from them. This article will discuss some common mistakes made by newbie web developers and how to avoid them. So, let’s get started.
1. Incomplete Input Validation
Many newbie developers make the mistake of thinking that only HTML and JavaScript validations are enough for user input validation.
Always do both Client-side and Server-side Input Validation
Users are human, after all, so they can make mistakes when filling in information such as mobile numbers or email addresses. That’s why developers use front-end validations to prevent them from making such mistakes. The latest front-end frameworks make it super easy to implement client-side validations. Therefore most of the time, newbie developers only do input validations at the client-side.
But these client-side validations can be easily bypassed by disabling JavaScript. Therefore it is necessary to implement server-side validations for user inputs as well. If you have not done server-side validations, your app will be vulnerable to attacks by hackers such as SQL Injection, which ranks first in the Top 10 Web Application Security Risks.
So if you’re taking any kind of user input, always make sure to validate it on both client and server sides. A good practice is to share your validators between the backend and frontend. This can be done by authoring the validator as an independent component using Bit, and sharing it on Bit.dev (or your own custom Bit server). Since shared components are consumed and maintained independently, it is much easier for developers on both sides, client and server, to maintain them and stay in-sync. That ensures the rules of validation are identical on both ends.
An is-emal validator shared on Bit.dev to be used an maintined by frontend & backend teams
2. Cross-Browser Incompatibility
Development processes have a strict timeframe most of the time. As a result, developers tend to use only one browser while developing to test the application. That is ok if you have time later to test it in cross-browsers and fix the issues.
Test your web application on multiple browsers. Better to use a tool.
But if you don’t get such a time period, it’s a good idea to test the application in cross-browsers while you’re developing. It’s not something that can be ignored. You need to test your application at least in three major browsers, such as Chrome, Firefox, and Microsoft Edge. There can be many UI issues that could come up in Firefox that aren’t on Chrome.
Try to make the web apps that you develop as cross-browser-friendly as possible. Avoid using browser-specific code, and keep in mind that a cross-browser compatible code can exist most of the time. You can use tools such as CrossBrowserTesting or LambdaTest to make cross-browser testing more efficient.
3. Overusing Libraries
Using many libraries in your application will increase the bundle size and increase the application build time. That will eventually increase page loading time as well. Therefore, be careful when adding many npm packages to your web application. Avoid using libraries if you can write your code with little time to do what the library does
You can check the bundle size of an npm package before adding it to your application by using the BundlePhobia website.
When using a library, be aware of the last commit date and the number of GitHub stars it has. If a library is unmaintained, it can be a major security vulnerability for your application. You may therefore need to migrate to another library or find different solutions.
Be aware of the library maintenance, existing issues of the library, and GitHub stars Most libraries make life easier for developers, but keep in mind that sometimes they can make it much harder, so choose them wisely.
4. Not Following Responsive Design from the Beginning
Newbie developers often make the mistake of not thinking about the responsive design of their web app at the beginning of development. It is crucial to define the breakpoints of the application right at the beginning. Different applications may have different breakpoints depending on the requirements and must be decided at the beginning of the development process.
Mobile-first development is also important for responsive design because it can make the website load faster on small devices.
With mobile-first, you’re building a strong foundation. This foundation will help strengthen tablet and desktop designs. Mobile-first design enables you to focus and maintain clarity by removing any unnecessary user interface decoration and improving user experience.
You can learn how to write media queries in Sass for the responsive design of your web app from here!
5. Skipping Image Optimization
Optimizing image size is essential for reducing the bandwidth usage of your web app. Imagine that your home page has five images and that each of them is 5MB or more. The user won’t wait until that page loads.
Use SVGs for logos, icons, and simple images instead of using JPG or PNG. There are plenty of free-to-use online tools that you can use to optimize JPG and PNG images, so stop skipping image optimization. You can learn about best image optimization practices from here!
6. Ignoring Technical SEO
Many new developers ignore doing Search Engine Optimization (SEO) of the websites or web applications they develop. That could be due to the lack of technical SEO knowledge or lack of development time. But it’s a big mistake to ignore it.
Think about SEO optimization from the beginning
Most users find websites using a search engine. SEO is therefore very valuable from the client’s point of view. So, if you have ignored SEO optimization as a developer, the site will be ranked below in the search results, and the client will not be satisfied.
As a web developer, you need to think about SEO right from the moment you start building your web application, not the end of it. Otherwise, you could end up with a lot of unnecessary rework. Here are a couple of tips for you guys to follow when developing,
Make sure the site architecture is crawlable
Optimize the website for efficient loading time
Use intelligent backlinking
Keep your coding W3C validated (You can use the W3C Markup Validation Service)
Eliminate duplicate content
Use image alt tags
You can learn more about the best SEO practices that web developers need to follow from here!
7. Too Much Manual Testing
Developers should not waste their valuable development time performing manual testing. Manual tests are not reusable, and they are boring and time-consuming. As a newbie, there’s a high chance that you could end up doing too much manual testing. Believe me, you’ll quickly get frustrated when you fill out the same forms time after time.
You can save a lot of time by starting to write automated test cases right from the beginning.
While the initial setup of automated test cases may take a while, you can reuse them anywhere once you have automated your tests. It also increases your confidence in automating the testing process. You can use CI/CD pipelines and pre-commit hooks to automate your testing and improve development and test efficiency.
You can learn more about writing automated tests for web apps from here!
8. Not Following Web Standards
There are standards in place to ensure that things are done correctly in a common way. Web standards help developers create apps that will work on the same quality for everyone.
Nowadays, most developers are self-taught, and most of the time, they learn from online tutorials. Most of the time, these tutorials do not mention the correct standards, so you end up unaware of them.
For example, when writing HTML, you need to use semantic elements to structure your web page according to the web standard.
From whatwg.org, you can learn all the latest HTML standards. Following correct standards also makes your application more accessible.
You can refer to the Web Content Accessibility Guidelines (WCAG) published by the W3C to ensure that your application is properly accessible.
These standards have been imposed to make web content more accessible to users with different types of needs on an international level. So make sure you follow these standards.
9. Writing Vanilla CSS
It’s 2021 now, and you’re not supposed to write vanilla CSS anymore. Start using CSS preprocessors such as Sass, Stylus, or Less. Or use styled-components (CSS-in-JS) if you’re using React. Newbie developers often make the mistake of ignoring them because of the learning curve.
Start using CSS preprocessor such as Sass/Stylus/Less if you haven’t already
There are many advantages to using CSS preprocessors or styled-components over plain CSS in web applications. Both CSS preprocessors and styled-components allow you to maintain a clean code architecture. You can do more styling with less code, thus increasing the efficiency of your development. If we take Sass as an example, it provides nesting so that you can use nested syntax and useful functions such as color manipulation, math functions, and so on. You can also customize Bootstrap with Sass since it’s written in Sass as well. Also, styled-components have enhanced reusability and high consistency.
Styled-components will take away your worries about overriding global scope selectors. Thus it is time to move on from writing plain CSS.
10. Writing CSS and JS in HTML Files
This is one of the oldest mistakes in the book, but the developers still make it. Sometimes it’s because it was the easier thing to do at the time, but the easier thing to do isn’t always the right thing to do. It’s a bad practice and will make your code messy and very difficult to test and debug. Security vulnerabilities and many more issues can happen.
Always write JavaScript and CSS to separate files and maintain a proper project architecture.
11. Ignoring Code Formatting and Commenting
If you see a set of JavaScript code lines with no indentation, useless blank spaces, useless newlines, and poor naming conventions, there’s a high chance that a newbie developer wrote it. No experienced developer would ever do that because they know how much of a headache it is to look at poorly formatted code.
Learn about the correct naming conventions for the languages you use, use the correct spelling when naming functions or variables, and use an automatic code formatting tool with your IDE.
Another good practice followed by experienced developers, ignored by newbies, is adding meaningful comments in the code. The purpose of adding comments is to document your code so that the code can be easily understood by other developers or even yourself in the future. You can use comments to define the variables, functions, class names, and what your code does at a high level.
Following proper formatting and commenting practices will make it easier to find bugs in your code as well. You can learn how to properly format and include comments in HTML, CSS, JS, and PHP code from here!
12. Relying on jQuery
The main reason to stop relying on jQuery is that anything jQuery can do, pure JavaScript or TypeScript can do better and faster. You’re definitely going to use a framework and libraries like Vue, React, or Angular today, so you don’t need jQuery. Adding jQuery is just going to make your app heavier. Another reason not to rely on jQuery is that you’re going to have a tough time adjusting to new frameworks because it doesn’t use a common syntax, and it has somewhat different DOM implementations.
Source: Medium - Manusha Chethiyawardhana
The Tech Platform
Thank you so much for sharing all this Wonderful information. Here’s an article for the same and might be a good addition to this topic.
https://ishahasan.com/top-10-mistakes-that-web-developers-make/