10 common mistakes web developers make

The options before us on how to accomplish the same task seem endless, especially when it comes to developing a website that can operate in a modern network environment. Web developers first need to select a web hosting platform and underlying data storage mechanism, and use the tools provided to write HTML, CSS and JavaScript code, consider how to achieve the design effect and which potential JavaScript libraries/frameworks may be included.

Once the choice is refined to this level, we can find a lot of related articles, forums and examples on the Internet, and learn how to create a better web experience. But no matter how many paths there are to choose from, developers can get lost among their options. While some of these errors are related to specific scenarios, there are also some common challenges that face every web developer.

So through a series of research, experience and recent observations, I compiled the following list of the top ten common mistakes - there are indeed many web developers who are still suffering from them, and I have also given them own solution.

　The following list is in no particular order.

　1. Writing old HTML code

　Mistake: In the early days of the Internet, only a few markup options were provided, but now such options have become quite rich. However, some old habits still exist today, and many practitioners write HTML code as if they are still living in the last century. Specific examples include using the

element for layout, continuing to use the or

element when other semantic tags are more suitable, and using elements such as or that are not currently supported. HTML standard tags even use a large number of items to arrange items on the page.

Impact: Writing the above-mentioned HTML code with a strong last century style may lead to excessive markup complexity, which will lead to different operating effects in different browsers. Furthermore, there is no reason to use such complex markup in Microsoft Edge or even newer versions of IE (including IE 9, 10, and 11).

　How to avoid: Don’t use the

element to handle content layout, and strictly limit its frequency of use when displaying table data. To get a good idea of ​​what markup options are currently available, check out the summary at whatwg.org here. Use HTML code to describe the content of the page, rather than defining how the content is displayed. To display your design content correctly, use CSS first.

　2. “There is no problem in my browser...”

　Error: Developers may favor a particular browser or have extreme disdain for another browser, and will use this biased view Bring it into web page testing work. In some cases, we may even incorporate sample code from the Internet directly into the project without testing that it renders correctly in other browsers. Furthermore, some browsers have different default settings for styles.

Impact: Writing a site that is only suitable for a specific browser is likely to bring a very bad access experience to users using other browsers.

　 How to avoid: It is obviously unrealistic to test web pages for every browser and version during the development process. However, we can use multiple browsers at specific intervals to check whether our website is functioning properly, which is an ideal compromise. No matter which preferred development platform you currently use, there are a large number of free tools that can help you with your testing work, including free virtual machines or site scanning tools. Websites such as Browsershots or BrowserStack can also provide snapshots to help us understand how a specific page renders on different browsers/versions/platforms. Tools such as Visual Studio can also use different browsers to display a single page we are currently developing. When designing with CSS, remember to "reset" all default values.

If your site uses any special CSS features created for a single browser, please be aware of the various provider prefixes, including -webkit-, moz-, or -ms-. As a guide to industry trends, I recommend that you carefully check the reference sites provided below (all in English original):

　• Microsoft Edge Development Blog: A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent…

　　• QuirksMode.org: CSS vendor prefixes considered harmful

　　• Bruce Lawson: On Internet Explorer supporting -webkit- vendor prefixes

　Although the above reference has explained how we can avoid providing procedural prefixes and the related reasons, you can also You can learn more about solutions with specific suggestions here (original in English).

　3. Pay attention to adjusting the format

　Error: Request information from the user through prompts (especially by entering text fields), and simply assume that the data can be obtained from the user as expected.

Impact: When trusting users to enter information by default, we may face a lot of unexpected troubles. If the requested data is not retrieved correctly, or the data retrieved is incompatible with the underlying data format, then the page is likely to error. What's more serious is that some intentional violations of the website database are even enough to constitute an injection attack.

　 How to avoid it: The first tip is to make sure users clearly understand what type of data the website is asking them to enter. For now, a simple "please enter address" prompt may mean that the user needs to enter a business address, a home address, or even an email address! In addition to making targeted explanations, we should also give full play to the data validity verification technology provided by modern HTML. Regardless of whether the data is considered valid on the browser side, it is important that we validate it on the server side as well. Never allow user-entered multi-row index T-SQL statements to use site data without confirming that the field contents comply with the data type requirements.

　4. The response speed is too slow

　Error: For pages that contain a large number of high-quality images and/or pictures, we should use the element to adjust its height and width attributes. And links to files such as CSS and JavaScript from the page are often bulky. Additionally, the presence of source HTML markup often introduces unnecessary complexity and loading burden.

Impact: If a page takes too long to fully render, some users may give up access or even impatiently reload the entire page. In some cases, other unknown errors may even occur if the page takes too long to process.

　 How to avoid: Don’t think that as the Internet’s transmission speed becomes faster and faster, you can design bloated page results without any scruples. Instead, consider every bit of traffic to and from your browser to your site an operating cost. Images can be said to be the culprit of bloated pages, so in order to minimize the loading cost that images bring to the page, please consider from the following three perspectives:

Ask yourself: “All images included on the page are Is it necessary?” If the answer is no, then get rid of the unnecessary images. You can also click here to scan your website to get recommendations on which images can be compressed.

Use tools like Shrink O’Matic or RIOT to control the size of your images to a minimum.

Adopt image preloading solution. This won't reduce the actual cost of the initial download, but it will allow other pages on your site that use related images to load faster.

Another way to reduce costs is to compress the size of CSS and JavaScript link files. Currently we can choose from a large number of tools to help us complete this assessment, including Minify CSS and Minify JS.

Before ending the fourth mistake, we have to mention that please make an accurate judgment before using the

　

　5. Write code that “should work”

　Error: Whether it is JavaScript or code running on the server side, as developers we should verify its actual operation through testing to ensure that it will work Functions as intended after deployment. Your code should not cause any errors when executed because we have fully tested it before doing so.

　Impact: Sites containing untested code are likely to produce errors in a very poor way for end users. Not only can this have a serious impact on the actual user experience, but the specific type of error message content may also reveal details that should be strictly protected to hackers looking to compromise the site.

　 How to avoid: People will inevitably make mistakes, so we should bring this philosophical thinking into programming work. In JavaScript, we should make sure to use all the best technical means to avoid errors and catch them when they actually occur. Another way to help improve code quality is to unit test your code against possible future changes.

　 Server-side code errors must be discovered and fixed before users are aware of them. Only display necessary error prompts to users, and please be more careful and design your HTTP 404 error page to be more beautiful.

　6. Writing fork code

　Error: Out of the noble idea of ​​supporting all browsers and their versions, some developers will create different codes to correspond to every possible running scenario. These codes are based on if statement loops, and provide corresponding fork versions for various practical directions.

Impact: As browser versions continue to be updated, the management of fork code files will become very complicated or even impossible. In addition, as mentioned in the first point, this is actually completely unnecessary.

　How to avoid: Perform feature detection within the code rather than targeting the browser/version. The emergence of functional detection technology solutions significantly reduces the amount of code, and also ensures that the code is easier to read and manage. You can consider using libraries such as Modernizr to help you implement function detection while automatically providing backup support for older browsers that can no longer adapt to HTML 5 or CSS 3.

　7. Use non-responsive design

　Error: When working on site development, it is assumed that the user has the same monitor size as the developer/designer.

　Impact: When viewing the site on mobile devices or certain very large screens, the user experience will also be affected - for example, certain important aspects of the page cannot be viewed, or even unable to navigate to other pages.

　How to avoid: Take responsive design into consideration in development. Use responsive design in your site, and even adjust image sizes in the same way. Bootstrap, a popular library, can definitely help you a lot in this regard.

　8. Building meaningless pages

　Error: Public-facing pages contain useful content and information, but do not provide any keywords, tags, and tips related to search engines. No accessibility features are provided.

　Impact: In this case, it will be difficult for users to find our page through search engines, which will make it difficult or even impossible to get the desired traffic. In addition, the page content needs to be carefully designed to ensure that the user's vision is not manipulated during viewing.

　 How to avoid: Use SEO (search engine optimization) mechanisms and support HTML accessibility. When it comes to SEO, make sure to add tags to provide meaningful page content with keywords and relevant descriptions. For a better accessibility experience, you can check the alt="your image description" attribute under each or tag. Of course, simply doing this is not enough. You can click here to visit to find out whether the page is compatible with Section 508.

　9. The developed page contains too many refresh operations

　Error: The created site contains too many page refresh steps for each operation.

　Impact: Similar to bloated pages (see point 4), the important performance indicator of page loading time will also be affected. If there are too many refreshes, the user experience will lack smoothness, and each content update may cause a short (or long) reset of the page.

　How to avoid: One of the convenient ways to solve this problem is to check whether each operation is really necessary to contact the server. For example, if we don't need to rely on server-side resources for processing, we can use the client's own scripts to provide immediate results. Of course, you can also use AJAX technology or go one step further and choose a single-page application SPA solution. Currently, various popular JavaScript libraries/frameworks provide many ways to simplify this problem, such as JQuery, KnockoutJS and AngularJS.

　10. Too much work

　Mistake: Developers may devote too much time to creating web content. This time may be spent performing repetitive tasks or simply entering large amounts of text.

Impact: When a website is just launched or is undergoing subsequent updates, the time developers invest in it is often too exaggerated. And when there are other developers who can achieve the same effect in shorter time and less effort, the time cost we invest will not get the ideal return. This simple, repetitive manual labor can lead to errors, and diagnosing errors is often more time-consuming than developing the project.

　How to avoid: Find your own solutions. We can consider using new tools or new workflow technologies to handle each stage of development. For example, is the code editor you are currently using better than Sublime Text or Visual Studio? No matter which code editor you are using, have you ever dug into its function settings? Maybe just by spending some sporadic time reading the documentation carefully, we can find new uses that are enough to save ourselves several hours or even more time in the future.

Also don’t miss any ready-made tools on the Internet that may help! For example, search dev.modern.ie for tools that simplify testing (across multiple platforms and devices) and troubleshooting.

　You can also reduce time requirements and chances of errors through automated processes. For example, we can use tools such as Grunt to automatically complete tasks such as file size compression. In addition, Bower can help you manage libraries and frameworks more efficiently.

Then is there any room for optimization in the web server itself? We can choose Microsoft Azure Web Apps and quickly create a site suitable for almost any development scenario. This is definitely an ideal solution for expanding your business!

　Conclusion

By listing the above common mistakes, web developers can eliminate many of the traps that have harmed countless predecessors. In addition to being aware of these pitfalls, we also understood the impact of these errors and how to fix them, and designed a development process accordingly to build confidence in our work while adapting to our habits. Comrades, come on!

　Original title: 10 Common Web Developer Mistakes