The purpose of these web development tips is to shed light on some of the common mistakes made in different stages of the web development process and to help you become a better developer. I have touched on a few general topics that are common to virtually all web developers such as validation, security, scalability, and SEO. You should of course not be bound by the specific examples I’ve described in this guide, as they are listed only to give you an idea of the potential problems you might encounter.
Think of all the web development mistakes that could be avoided at this campout!
Common Mistake #1: Incomplete Input Validation
Validating user input on client and server side is simply a must do! We are all aware of the sage advice “do not trust user input” but, nevertheless, mistakes stemming from validation happen all too often.
One of the most common consequences of this mistake is SQL Injection which is in OWASP Top 10 year after year.
Remember that most front-end development frameworks provide out-of-the-box validation rules that are incredibly simple to use. Additionally, most major back-end development platforms use simple annotations to assure that submitted data are adhering to expected rules. Implementing validation might be time-consuming, but it should be part of your standard coding practice and never set aside.
Common Mistake #2: Authentication without Proper Authorization
Before we proceed, let’s make sure we are aligned on these two terms. As stated in the 10 Most Common Web Security Vulnerabilities:
Authentication: Verifying that a person is (or at least appears to be) a specific user since he/she has correctly provided their security credentials (password, answers to security questions, fingerprint scan, etc.).
Authorization: Confirming that a particular user has access to a specific resource or is granted permission to perform a particular action.
Stated another way, authentication knows who an entity is, while authorization knows what a given entity can do.
Let me demonstrate this issue with an example:
Consider that your browser holds currently logged user information in an object similar to the following:
When doing a password change, your application makes the POST:
In your /changepassword method, you verify that user is logged and the token has not expired. Then you find the user profile based on the :username parameter, and you change your user’s password.
So, you validated that your user is properly logged in, and then you executed his request thus changing his password. The process seems OK, right? Unfortunately, the answer is NO!
At this point, it is important to verify that the user executing the action and the user whose password is changed are the same. Any information stored on the browser can be tampered with, and any advanced user could easily update username:‘elvis‘ to username:’Administrator’ without using anything else but built-in browser tools.
So in this case, we just took care of Authentication making sure that the user provided security credentials. We can even add validation that /changepassword method can only be executed by Authenticated users. However, this is still not enough to protect your users from malicious attempts.
You need to make sure that you verify actual requestor and content of request within your /changepassword method and implement proper Authorization of the request making sure that user can change only her data.
Authentication and Authorization are two sides of the same coin. Never treat them separately.
Common Mistake #3: Not Ready to Scale
In today’s world of high-speed development, startup accelerators, and instant global reach of great ideas, having your MVP (Minimum Viable Product) out on the market as soon as possible is a common goal for many companies.
However, this constant time pressure is causing even good web development teams to overlook certain issues often. Scaling is often one of those things teams take for granted. The MVP concept is great, but push it too far, and you’ll have serious problems. Unfortunately, selecting a scalable database and web server and separating all application layers on independently scalable servers is not enough. There are many details you need to think about if you wish to avoid rewriting significant parts of your application later – which becomes a major web development problem.
For example, say that you choose to store uploaded profile pictures of your users directly on a web server. This is a perfectly valid solution–files are quickly accessible to the application, file handling methods are available in every development platform, and you can even serve these images as static content, which means minimum load on your application.
But what happens when your application grows, and you need to use two or more web servers behind a load balancer? Even though you nicely scaled your database storage, session state servers, and web servers, your application scalability fails because of a simple thing like profile images. Thus, you need to implement some kinds of file synchronization service (that will have a delay and will cause temporary 404 errors) or another workaround to assure that files are spread across your web servers.
This bloated blowfish is full of web development tips and tutorials to avoid common mistakes.
What you needed to do to avoid the problem in the first place was just use shared file storage location, database, or any other remote storage solution. It would have probably cost few extra hours of work to have it all implemented, but it would have been worth the trouble.
Common Mistake #4: Wrong or Missing SEO
The root cause of incorrect or missing SEO best practices on websites is misinformed “SEO specialists.” Many web developers believe that they know enough about SEO and that it is not especially complex, but that’s just not true. SEO mastery requires significant time spent researching best practices and the ever-changing rules about how Google, Bing, and Yahoo index the web. Unless you constantly experiment and have accurate tracking + analysis, you are not an SEO specialist, and you should not claim to be one.
Furthermore, SEO is too often postponed as some activity that is done at the end. This comes at a high price of web development issues. SEO is not just related to setting good content, tags, keywords, meta-data, image alt tags, sitemap, etc. It also includes eliminating duplicate content, having crawlable site architecture, efficient load times, intelligent backlinking, etc.
Like with scalability, you should think about SEO from the moment you start building your web application, or you might find that completing your SEO implementation project means rewriting your whole system.
Common Mistake #5: Time or Processor Consuming Actions in Request Handlers
One of the best examples of this mistake is sending email based on a user action. Too often developers think that making an SMTP call and sending a message directly from user request handler is the solution.
Let’s say you created an online bookstore, and you expect to start with a few hundred orders daily. As part of your order intake process, you send confirmation emails each time a user posts an order. This will work without a problem at first, but what happens when you scale your system, and you suddenly get thousands of requests sending confirmation emails? You either get SMTP connection timeouts, quota exceeded, or your application response time degrades significantly as it is now handling emails instead of users.
Anytime or processor consuming action should be handled by an external process while you release your HTTP requests as soon as possible. In this case, you should have an external mailing service that is picking up orders and sending notifications.
Common Mistake #6: Not Optimizing Bandwidth Usage
Most development and testing take place in a local network environment. So when you are downloading five background images each being 3MB or more, you might not identify an issue with 1Gbit connection speed in your development environment. But when your users start loading a 15MB home page over 3G connections on their smartphones, you should prepare yourself for a list of complaints and problems.
Optimizing your bandwidth usage could give you a great performance boost, and gain this boost you probably only need a couple of tricks. There are few things that many good web developers do by default, including:
- Minification of all CSS
- Server-side HTTP compression
- Optimization of image size and resolution
Common Mistake #7: Not Developing for Different Screen Sizes
Responsive design has been a big topic in the past few years. Expansion of smartphones with different screen resolutions has brought many new ways of accessing online content, which also comes with a host of web development issues. The number of website visits that come from smartphones and tablets grows every day, and this trend is accelerating.
To ensure seamless navigation and access to website content, you must enable users to access it from all types of devices.
Common Mistake #8: Cross Browser Incompatibility
The development process is, in most cases, under a heavy time pressure. Every application needs to be released as soon as possible, and even good web developers are often focused on delivering functionality over design. Regardless of the fact that most developers have Chrome, Firefox, IE installed, they are using only one of this 90 % of the time. It is common practice to use one browser during development and just as the application nears completion will you start testing it in other browsers. This is perfectly reasonable–assuming you have a lot of time to test and fix issues that show up at this stage.
However, there are some web development tips that can save you significant time when your application reaches the cross-browser testing phase:
- You don’t need to test in all browsers during development; it is time-consuming and ineffective. However, that does not mean that you cannot switch browsers frequently. Use a different browser every couple of days, and you will at least recognize major problems early in the development
- Be careful of using statistics to justify not supporting a browser. There are many organizations that are slow in adopting new software or upgrading. Thousands of users working there might still need access to your application, and they cannot install the latest free browser due to internal security and business policies.
- Avoid browser-specific In most cases, there is an elegant solution that is cross-browser compatible.
Common Mistake #9: Not Planning for Portability
The assumption is the mother of all problems! When it comes to portability, this saying is truer than ever. How many times have you seen issues in web development like hard coded file paths, database connection strings, or assumptions that a certain library will be available on the server? Assuming that the production environment will match your local development computer is simply wrong.
Ideal application setup should be maintenance-free:
- Make sure that your application can scale and run on load-balanced multiple server environments.
- Allow simple and clear configuration–possibly in a single configuration file.
- Handle exceptions when web server configuration is not as expected.
Common Mistake #10: RESTful Anti-Patterns
RESTful API’s have taken their place in web development and are here to stay. Almost every web application has implemented some kinds of REST services, whether for internal use or integrating with an external system. But we still see broken RESTful patterns and services that do not adhere to expected practices.
Two of the most common mistakes made when writing a RESTful API are:
- Using wrong HTTP verbs. For example using GET for writing data. HTTP GET has been designed to be idempotent and safe, meaning that no matter how many times you call GET on the same resource, the response should always be the same and no change in application state should occur.
- Not sending correct HTTP status codes. The best example of this mistake is sending error messages with response code 200.
You should only send HTTP 200 OK when the request has not generated an error. In the case of an error, you should send 400, 401, 500 or any other status code that is appropriate for the error that has occurred.
A detailed overview of standard HTTP status codes can be found here.
Web development is an extremely broad term that can legitimately encompass development of a website, web service, or complex web application.
The main takeaway of this web development guide is the reminder that you should always be careful about authentication and authorization, plan for scalability, and never hastily assume anything – or be ready to deal with a long list of web development problems!